removeNode() - a Cool Non-DOM Method

for Win IE5+ Only

removeNode() is an IE only method that is not part of the DOM. The method is so cool, however, that it's my contention that it should be.

Here's why -

Take the method cloneNode(). The method takes 2 parameters, true and false. If you call cloneNode(false), the method only copies the node, not its child nodes. If you call cloneNode(true), it copies the node AND all its child nodes.

Now, what method does the DOM provide us with that is the reverse behaviour of cloneNode? removeChild(). But removeChild only works one way. It removes a node and all its child node. So what do you do if you want to remove a node but leave all it's child nodes? That's where removeNode() comes in.

Like cloneNode(), removeNode() takes the true and false parameters.
x.removeNode(true) removes node x and all its child nodes. This is just like removeChild().
x.removeNode(false) removes only the x node and leaves all its child nodes.

With x.removeNode(false), when x is removed, all of its child nodes remain and they become this child nodes of x's parent node. It's the javascript equivilent of pulling the table cloth off a fully laid out table without disturbing anything.

Below is div id="div1". It has a purplish background color, a dashed border, and it contains 1 child node, a table that lists the 4 elements. Clicking on the button below the div will remove the div from document and leave the table.

Cool right?

What I find removeNode really useful for is when you want to move a large group of objects to a new location without having to add each one individually using a loop. For instance, what if you want to copy the rows from one table tbody to another. Without removeNode you would have to use a loop to add each one like this:

<script>
function addRows(){
var t1 = document.getElementById('table1').getElementsByTagName('tbody')[0]; 
var t2 = document.getElementById('table2').getElementsByTagName('tbody')[0]; 

 for (i=0; i< t1Len;i++){
  var clone = t1.childNodes[i].cloneNode(true);
  t2.appendChild(clone);
 }
}
</script>

This works well enough with a small number of objects. What if you want to copy over 300 rows? A loop can really slow things down. removeNode lets you skip the loop and do this instead :

Step 1. clone the tbody from the first table
Step 2. append it to the tbody of the second table. The second table's tbody now has a tbody child node. This is not correct markup but what the hell?
Step 3. remove the tbody node making it's tr child nodes the child nodes of the top tbody and restoring markup harmony.

The function transferRows() below does just that. Alerts have been added to the function to tell you the number of childNodes table2 tbody has at each step. Click the button below Table id="table2" to see it in action.

<script>
function transferRows(){
 var t1 = document.getElementById('table1').getElementsByTagName('tbody')[0]; 
 var t2 = document.getElementById('table2').getElementsByTagName('tbody')[0]; 
 
 // - table 2 tbody starts with ust 2 child nodes
 alert('Before Step 1 : '+t2.childNodes.length + ' child nodes');
 
 // - Step 1 - make a clone of the table1 tbody and all its childNodes
 var t1Clone = t1.cloneNode(true);
 
 // - Step 2 - append this cloned tbody to table2 tbody. table 2 tbody will have 3 child nodes
 t2.appendChild(t1Clone);
 alert('After Step 2 : '+t2.childNodes.length + ' child nodes');
 
 // - Step 3 - remove the tbody tags so that the rows become childNodes of the table2 tbody. 
 // - table2 tbody will have 21 child nodes
 t1Clone.removeNode(false);
 alert('After Step 3 : '+t2.childNodes.length + ' child nodes');
}
</script>

Table id="table1" PENNSYLVANIA 3 Robert A. Borski Philadelphia 4 Melissa A. Hart Bradford Woods 5 John E. Peterson Pleasantville 6 Tim Holden Saint Clair 7 Curt Weldon Aston 8 James C. Greenwood Doylestown 9 Bill Shuster Hollidaysburg 10 Don Sherwood Tunkhannock 11 Paul E. Kanjorski Nanticoke 12 John P. Murtha Johnstown 13 Joseph M. Hoeffel Abington 14 William J. Coyne Pittsburgh 15 Patrick J. Toomey Allentown 16 Joseph R. Pitts Kennett Square 17 George W. Gekas Harrisburg 18 Michael F. Doyle Swissvale 19 Todd Russell Platts York 20 Frank Mascara Charleroi 21 Phil English Erie

Table id="table2" PENNSYLVANIA 1 Robert A. Brady Philadelphia 2 Chaka Fattah Philadelphia

 

Gone but not forgotten

As with removeChild(), the removeNode() method returns a copy of the object. If you you assign the method to a variable, you can reuse the object or manipulate its properties. The yellow div below is div id="div2". If you click on the button below it, the function removeDiv2() will remove it from its current location and then append it as the last document child.

<script>
function removeDiv2(){
 var x = document.getElementById('div2').removeNode(false);
 document.body.appendChild(x);
}
</script>

 

*WARNING!

removeNode is a Microsoft method. It’s not part of the DOM and isn't supported by Netscape 6.

---

PXL8 2003