Does Removechild Really Delete The Element?

Does removeChild function really delete the child node completely? Or it just removes the element being child of the specified parant node? If it doesn't really deletes the element

Solution 1:

The removeChild method simply removes it from its parent. If it’s a visible element of the page, it will be removed from the page.

But Javascript has garbage collection. This means that the node object itself will remain in existence as long as any variable refers to it. So you can assign a node to a variable, use removeChild to 'prune' it from its parent node, and later on, insert or append it to some other node, thereby effectively moving it around on the page.

The following code will remove a node, and wait 10 seconds before re-adding it to the tree (and thus, to the page):

var oldNode = someNode.removeChild(...);
setTimeout(function () {
  document.documentElement.appendChild(oldNode);
}, 10000);

This means that the node object hasn’t been deleted from memory, because there’s still a variable pointing to it (namely, oldNode).

Another case:

var node = document.getElementById('test');
// ... do stuff
node.parentElement.removeChild(node);
// 'node' still exists, but has been removed from the page// ... do some more stuff
node = document.getElementById('hello');
// The variable 'node' now points to something else; //  this means the original node will be deleted from memory

If, on the other hand, you don’t reassign the removed node to another variable, it can’t be accessed anymore (not via the document tree, since it’s been removed from there; and not via a JS variable); so Javascript will automatically purge it from memory:

someNode.removeChild(...);

Assigning the removed node to a variable, and then assigning null (or anything else) to that variable — like Marc B suggests in his answer — is completely unnecessary and, IMHO, silly.

Solution 2:

This will completely delete the node:

someNode.removeChild(...);

This will remove the node from the DOM so it's not visible but will save it so that you can insert it elsewhere:

oldNode = someNode.removeChild(...);

Solution 3:

removeChild removes the element from the dom, but it's also returned from the function in case you're doing the removal to re-insert it elsewhere. You'd have to kill that return value to really get rid of the removed node:

oldNode = someNode.removeChild(...);oldNode = null;

Solution 4:

If you want to really delete a dom element . removeChild alone is not enough. This is as per Steve Sounders who is the author of YSlow. You need to use delete