12

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, is there a way to delete the element completely?

Yunus Eren Güzel
  • 3,018
  • 11
  • 36
  • 63

4 Answers4

18

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.

Martijn
  • 13,225
  • 3
  • 48
  • 58
11

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(...);
awm
  • 6,526
  • 25
  • 24
  • 1
    The first example is correct, but I had a situation where it didn't seem to work, e.g. `var aChild = document.createElement(...); someNode.appendChild(aChild); ... someNode.removeChild(aChild);` The node remains due to the aChild variable reference. In that case you need to `delete aChild` to complete the job. – CyberFonic May 08 '12 at 23:47
  • From another context (where you might not know whether there are other references to the removed node), you can check to see which state the removed node is in with `node.parentElement == null` – Eric Nguyen Jan 30 '14 at 01:21
  • This doesn't take into account other references to the node. Meaning if the node is referenced elsewhere `removeChild` will not completely delete the node. – hal Aug 06 '15 at 09:53
  • @moss You are correct, and you're also needlessly pedantic. In fact, even when there are no references to it, the node doesn't get completely deleted until garbage collection. The point is that `removeChild()` removes the node from the DOM, and you can save it for later use *(2nd example)* or not *(1st example)*, as you like. – awm Aug 10 '15 at 02:24
  • 1
    I don't think it's pedantic to mention that a node will not be completely removed from memory if it is referenced elsewhere. It might not be useful to the OP, but someone who stumbles upon this question later might find that information useful. – hal Aug 17 '15 at 12:48
1

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;
Marc B
  • 356,200
  • 43
  • 426
  • 500
  • 5
    Wouldn't simply not assigning the return value to anything have the same effect? – awm Mar 04 '11 at 14:24
  • 1
    Null's convenient and makes it obvious you're trashing the value. doing `oldNode = 'delete this node please';` just seems like a waste of characters. – Marc B Mar 04 '11 at 14:26
  • 4
    I think the OP means "remove the element from the render" when saying "delete the element", i.e. they do not fully understand that removing an element from the DOM tree will always result in it "disappearing". There's *absolutely no reason* to store the return value in a variable; at best it's misleading. – Jon Mar 04 '11 at 14:27
1

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

Arun George
  • 78
  • 10