Working with Object Trees: Part One
Pages: 1, 2, 3
Truly deleting an array element
By now, you are probably as disappointed with the delete operator as I was. However, my experiment reveals that you can actually decrease the length property of an array, effectively deleting the last element. Consider the code in Listing 6.
Listing 6: Truly deleting an array element
<html>
<script language="JavaScript">
var myArray = new Array();
myArray[0] = "first element.";
myArray[1] = "second element.";
myArray[2] = "third element.";
myArray.length--;
document.write("Array length : " + myArray.length + "<br />");
for (var i=0; i<myArray.length; i++)
document.write("element " + i + " : " + myArray[i] + "<br />");
document.write("element " + 3 + " : " + myArray[2] + "<br />");
</script>
</html>
The code in Listing 6 produces the following result:
Array length : 2 element 0 : first element. element 1 : second element. element 3 : undefined
This shows that after you decrement the length property, the last element is really gone. A cross-browser function to delete the nth element of an array is given in Listing 7.
Listing 7: The deleteElement function
function deleteElement(array, n) {
//delete the nth element of array
var length = array.length;
if (n >= length || n<0)
return;
for (var i=n; i<length-1; i++)
array[i] = array[i+1];
array.length--;
}This assumes n is a numeric value. Consider the example in Listing 8 that uses the deleteElement function.
Listing 8: Using the deleteElement function
<html>
<script language="JavaScript">
function deleteElement(array, n) {
//delete the nth element of array
var length = array.length;
if (n >= length || n<0)
return;
for (var i=n; i<length-1; i++)
array[i] = array[i+1];
array.length--;
}
var myArray = new Array();
myArray[0] = "first element.";
myArray[1] = "second element.";
myArray[2] = "third element.";
myArray[3] = "4th";
document.write("length : " + myArray.length + "<br />");
for (var i=0; i<myArray.length; i++)
document.write("element " + i + " : " + myArray[i] + "<br />");
deleteElement(myArray, 1);
document.write("length : " + myArray.length + "<br />");
for (var i=0; i<myArray.length; i++)
document.write("element " + i + " : " + myArray[i] + "<br />");
</script>
</html>
The code in Listing 8 creates and populates an array called myArray and then loops through the myArray Array object to display the value of the length property and all its elements.
for (var i=0; i<myArray.length; i++)
document.write("element " + i + " : " + myArray[i] + "<br />");It then deletes the second element of myArray and redisplays the length property and the contents. The result is as follows.
length : 4 element 0 : first element. element 1 : second element. element 2 : third element. element 3 : 4th length : 3 element 0 : first element. element 1 : third element. element 2 : 4th
Next week
Next week, I'll get into creating, appending, and searching for objects. So play with the examples in this article, then stop back by next week for round two.
Budi Kurniawan is a senior J2EE architect and author.
Return to the JavaScript and CSS DevCenter.
