The Document Object Model (DOM), Part 4: The removeNode Method

The Document Object Model (DOM), Part 4 (4)

The removeNode Method

As mentioned earlier, removeNode(false) deletes just the specified node. Let's take an example:

deletedNode = p3Node.removeNode(false);

The effect of this statement is the removal of the node p3Node and the formation of new father-child relationship between its former children (now orphans) and its former father. Basically, all grandchildren are promoted to be children of their former grandfather (p3Node's former father).

Now let's demonstrate this behavior. Examine the following script we have added to our previous complex example:

<SCRIPT LANGUAGE="JavaScript">
<!--
var msg = "";
function printChildren()  {
   childCount = bodyNode.childNodes.length;
   msg += "bodyNode.childNodes.length = " + bodyNode.
     childNodes.length + "\n" ;
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
   for(var i = 0; i < childCount; i++)  {
   msg += "bodyNode.childNodes[i].nodeName = " + bodyNode.
     childNodes[i].nodeName + "\n";\
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
   }
}
printChildren();
msg += "Deleting Paragraph 3\n";
var deletedNode = p3Node.removeNode(false);
msg += "deletedNode.nodeName = " + deletedNode.nodeName + "\n";
msg += "deletedNode.childNodes.length = " + deletedNode.
  childNodes.length + "\n";
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
printChildren();
alert(msg);
// -->
</SCRIPT>

The printChildren function prints all bodyNode's children. The number of children is computed by bodyNode.childNodes.length. We print the nodeName property for each child. The main program is very short. We first print the original page's children by calling printChildren(). We then remove the p3Node node:

var deletedNode = p3Node.removeNode(false);

We then print again the page's children of p3Node. We inserted three statements between the two printouts. First we added an announcement of the removal:

msg += "Deleting Paragraph 3\n";

Then we wanted to show that the returned value is the removed object itself. We printed its nodeName property:

msg += "deletedNode.nodeName = " + deletedNode.nodeName + "\n";

Then we printed its number of children, which should come out to be zero:

msg += "deletedNode.childNodes.length = " + deletedNode.
  childNodes.length + "\n";
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)

Try running the script now. You can make several observations. First, the page has 6 children before the node removal, as we showed in our previous columns (the <SCRIPT> tag is not drawn). After the p3Node's removal, the number of children dropped by one but increased back by the four p3Node's children, bringing the count to 9. All p3Node's children became children of their grandfather, bodyNode.

Notice that the page remains unchanged. The textual content of the paragraph became a textual node of the main body. Also notice from the alert box that the returned value (deletedNode) has no children and is of type P. The return value from removeNode(false) is thus the removed node itself, disconnected from its children.

Let's examine now what happens when we call removeNode() with the true parameter. Click here to watch the previous script running with the true parameter. You can see that the whole subtree rooted at p3node is removed, including its colorful table.

Produced by Yehuda Shiran and Tomer Shiran

Created: July 5, 1999
Revised: September 17, 1999

URL: https://www.webreference.com/js/column43/remove.html