The delete Operator

Contact Us or call 1-877-932-8228
The delete Operator

The delete Operator

The delete operator is used to delete properties of objects and elements of arrays. Deleting is different from setting the value to null. The former removes the property or element (i.e, makes it undefined) while the latter keeps the property or element, but sets its value to null. The following example illustrates this.

Code Sample:

AdvancedTechniques/Demos/delete.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
	var colors = [];
	colors["red"] = "#f00";
	colors["green"] = "#060";
	colors["blue"] = "#00f";
	colors["yellow"] = "#ff0";
	colors["orange"] = "#0ff";
	
	function deleteItem() {
		delete colors["blue"];
		showArray();
		revealArray();
	}
	
	function setToNull() {
		colors["blue"] = null;
		showArray();
		revealArray();
	}
	
	function showArray() {
		var output = document.getElementById("colors");
		var strOutput = "<ol>";
		for (var i in colors) {
			strOutput += "<li style='color:" + colors[i] + ";'>" + i + "</li>";
		}
		strOutput += "</ol>";
		output.innerHTML=strOutput;
	}
	
	function revealArray() {
		var colorsCode = document.getElementById("colors-code");
		var strOutput = "&lt;ol&gt;";
		for (var i in colors) {
			strOutput+="\n\t&lt;li style='color:" + colors[i] + ";'&gt;" + i + "&lt;/li&gt;";
		}
		strOutput += "\n&lt;/ol&gt;";	
		colorsCode.innerHTML=strOutput;
	}
</script>
<title>Delete vs. Setting to NULL</title>
</head>
<body onload="showArray();revealArray();">
<button id="set-to-null" onclick="setToNull();">Set Blue to Null</button>
<button id="del" onclick="deleteItem();">Delete Blue</button>
<output id="colors"></output>
<pre id="colors-code"></pre>
</body>
</html>

Don't worry about the showArray() and revealArray() functions yet. Just note that when you click the Set Blue to Null button, the array element stays, but becomes an invalid color: null. When you click the Delete Blue button, the array element is removed.

Next