Remove all child elements of a DOM node in JavaScript
Option 1 A: Clearing innerHTML.
- This approach is simple, but might not be suitable for high-performance applications because it invokes the browser's HTML parser (though browsers may optimize for the case where the value is an empty string).
doFoo.onclick = () => { const myNode = document.getElementById("foo"); myNode.innerHTML = '';}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <span>Hello</span></div><button id='doFoo'>Remove via innerHTML</button>Option 1 B: Clearing textContent
- As above, but use
.textContent. According to MDN this will be faster thaninnerHTMLas browsers won't invoke their HTML parsers and will instead immediately replace all children of the element with a single#textnode.
doFoo.onclick = () => { const myNode = document.getElementById("foo"); myNode.textContent = '';}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <span>Hello</span></div><button id='doFoo'>Remove via textContent</button>Option 2 A: Looping to remove every lastChild:
- An earlier edit to this answer used
firstChild, but this is updated to uselastChildas in computer-science, in general, it's significantly faster to remove the last element of a collection than it is to remove the first element (depending on how the collection is implemented). - The loop continues to check for
firstChildjust in case it's faster to check forfirstChildthanlastChild(e.g. if the element list is implemented as a directed linked-list by the UA).
doFoo.onclick = () => { const myNode = document.getElementById("foo"); while (myNode.firstChild) { myNode.removeChild(myNode.lastChild); }}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <span>Hello</span></div><button id='doFoo'>Remove via lastChild-loop</button>Option 2 B: Looping to remove every lastElementChild:
- This approach preserves all non-
Element(namely#textnodes and<!-- comments -->) children of the parent (but not their descendants) - and this may be desirable in your application (e.g. some templating systems that use inline HTML comments to store template instructions). - This approach wasn't used until recent years as Internet Explorer only added support for
lastElementChildin IE9.
doFoo.onclick = () => { const myNode = document.getElementById("foo"); while (myNode.lastElementChild) { myNode.removeChild(myNode.lastElementChild); }}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <!-- This comment won't be removed --> <span>Hello <!-- This comment WILL be removed --></span> <!-- But this one won't. --></div><button id='doFoo'>Remove via lastElementChild-loop</button>Bonus: Element.clearChildren monkey-patch:
- We can add a new method-property to the
Elementprototype in JavaScript to simplify invoking it to justel.clearChildren()(whereelis any HTML element object). - (Strictly speaking this is a monkey-patch, not a polyfill, as this is not a standard DOM feature or missing feature. Note that monkey-patching is rightfully discouraged in many situations.)
if( typeof Element.prototype.clearChildren === 'undefined' ) { Object.defineProperty(Element.prototype, 'clearChildren', { configurable: true, enumerable: false, value: function() { while(this.firstChild) this.removeChild(this.lastChild); } });}<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;"> <span>Hello <!-- This comment WILL be removed --></span></div><button onclick="this.previousElementSibling.clearChildren()">Remove via monkey-patch</button>
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/300https://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.
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 relying on parent.
All modern browsers are supported.
Browser Support - 97% Jun '21