Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






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.