Remove all child elements of a DOM node in JavaScript

Remove all child elements of a DOM node in JavaScript

How would I go about removing all of the child elements of a DOM node in JavaScript?
Say I have the following (ugly) HTML:

hello

world

And I grab the node I want like so:
var myNode = document.getElementById(“foo”);

How could I remove the children of foo so that just

is left?
Could I just do:
myNode.childNodes = new Array();

or should I be using some combination of removeElement?
I’d like the answer to be straight up DOM; though extra points if you also provide an answer in jQuery along with the DOM-only answer.

Solutions/Answers:

Solution 1:

Option 1 (much slower, see comments below):

var myNode = document.getElementById("foo");
myNode.innerHTML = '';

Option 2 (much faster):

var myNode = document.getElementById("foo");
while (myNode.firstChild) {
    myNode.removeChild(myNode.firstChild);
}

Solution 2:

The currently accepted answer is wrong about innerHTML being slower (at least in IE and Chrome), as m93a correctly mentioned.

Chrome and FF are dramatically faster using this method (which will destroy attached jquery data):

var cNode = node.cloneNode(false);
node.parentNode.replaceChild(cNode, node);

in a distant second for FF and Chrome, and fastest in IE:

node.innerHTML = '';

InnerHTML won’t destroy your event handlers or break jquery references, it’s also recommended as a solution here:
https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML.

The fastest DOM manipulation method (still slower than the previous two) is the Range removal, but ranges aren’t supported until IE9.

var range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();

The other methods mentioned seem to be comparable, but a lot slower than innerHTML, except for the outlier, jquery (1.1.1 and 3.1.1), which is considerably slower than anything else:

$(node).empty();

Evidence here:

http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300
https://jsperf.com/remove-all-child-elements-of-a-dom-node-in-javascript
(New url for jsperf reboot because editing the old url isn’t working)

Jsperf’s “per-test-loop” often gets understood as “per-iteration”, and only the first iteration has nodes to remove so the results are meaningless, at time of posting there were tests in this thread set up incorrectly.

Solution 3:

var myNode = document.getElementById("foo");
var fc = myNode.firstChild;

while( fc ) {
    myNode.removeChild( fc );
    fc = myNode.firstChild;
}

If there’s any chance that you have jQuery affected descendants, then you must use some method that will clean up jQuery data.

$('#foo').empty();

The jQuery .empty() method will ensure that any data that jQuery associated with elements being removed will be cleaned up.

If you simply use DOM methods of removing the children, that data will remain.

Solution 4:

Use modern Javascript, with remove!

const parent = document.getElementById("foo");
while (parent.firstChild) {
    parent.firstChild.remove();
}

This is a newer way to write node removal in ES5. It is vanilla JS and reads much nicer than previous versions.

Most users should have modern browsers or you can transpile down if needed.

Browser Support – 94% May 2019

Solution 5:

If you use jQuery:

$('#foo').empty();

If you don’t:

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);

Solution 6:

The fastest…

var removeChilds = function (node) {
    var last;
    while (last = node.lastChild) node.removeChild(last);
};

Thanks to Andrey Lushnikov for his link to jsperf.com (cool site!).

EDIT: to be clear, there is no performance difference in Chrome between firstChild and lastChild. The top answer shows a good solution for performance.