removeChild()

for IE5+ and Netscape 6

Let’s start by first removing just one node. In the div ”test1” below, we'll remove the table using the code
document.getElementById('test1').removeChild(document.getElementById('test1').childNodes[0]);.

<div id=”test1”> </div>

 

Pretty straight forward, right? It isn’t until you need to remove more than one child node that things get tricky.

 

Using removeChild() when there is more than one child node

What if you want to remove ALL the nodes contained in a div but you’re not sure how many there are? Normally, you’de write a for loop that looks something like this:

<script>
  var d2=document.getElementById('test2');
  
  for (i=0;i<d2.childNodes.length;i++){
       d2.removeChild(d2.childNodes[i]);
  }
</script>

 

This is not going to work with removeChild. Every time the script loops, the length of your child nodes decreases. With this script the loop will always stop when half the nodes have been removed. If you start with 6 nodes, the loop will stop after 3, when i and the number of child nodes left are equal.

What we need is a slightly different logic. Here’s the solution:
Create a variable to hold the childNodes.length value. That fixed value is what we’ll use for the loop.
Next, change the childNode to be removed from d2.childNodes[i] to d2.childNodes[0].

<div id=”test2”> </div>

<script>
function removeAllNodes(){
var d2=document.getElementById('test2');
	// -- d2Len holds the fixed starting value of the number of childNodes
var d2Len=d2.childNodes.length;  

  for (i=0;i<d2Len;i++){
       d2.removeChild(d2.childNodes[0]);
  }
}
</script>

 

Gone but not forgotten

You used removeChild() to get rid of a node but now you're having second thoughts. What if you made a mistake getting rid of it? Can you ever get it back again? If you assigned the method to a variable, you can.

The removeChild() method returns a copy of the object. By assigning the returned object to a variable you can manipulate it the same way you would any other node - by inserting it somewhere else in the document; by adding to or changing it's properties.

Use the button below to call the function removeDiv(). This will remove the childNode of div id="gone" and store it in var goneChild.

<div id="gone"> </div>

<script>
var goneChild;

function removeDiv(){
 var gone=document.getElementById('gone');
 // -- var goneChild will hold the object
 goneChild=gone.removeChild(gone.childNodes[0]);  
}
</script>

 

Now use function returnDiv() to put goneChild into div id="destination".

<div id="destination"> </div>

<script>
function returnDiv(){
 document.getElementById('destination').appendChild(goneChild); 
}
</script>

 

---

PXL8 2003