By Polaris878


2010-10-17 20:51:00 8 Comments

How would I go about removing all of the child elements of a DOM node in JavaScript?

Say I have the following (ugly) HTML:

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

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 <p id="foo"></p> 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.

30 comments

@Gibolt 2016-11-15 09:57:09

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 - 96% Jun 2020

@qix 2016-11-16 10:19:55

The for loop will not work since parent.children / parent.childNodes are live lists; calling remove modifies the list and your iterator therefore isn't guaranteed to iterate over everything. In chrome, e.g., you end up skipping every other node. Better to use a while (parent.firstChild) { parent.removeChild(parent.firstChild); } loop. developer.mozilla.org/en-US/docs/Web/API/ParentNode/children developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

@Gibolt 2017-05-08 00:36:40

Cool shorthand, although less readable: while (parent.firstChild && !parent.firstChild.remove());

@user993683 2018-08-13 12:10:18

A one-liner for when performance isn't a huge deal: [...parent.childNodes].forEach(el => el.remove());

@John Henckel 2018-08-20 20:56:20

This does not work in Typescript... instead use while (selectElem.firstElementChild) { selectElem.firstElementChild.remove(); }

@12Me21 2020-08-05 19:38:20

element.innerHTML = "" (or .textContent) is by far the fastest solution

Most of the answers here are based on flawed tests

For example: https://jsperf.com/innerhtml-vs-removechild/15
This test does not add new children to the element between each iteration. The first iteration will remove the element's contents, and every other iteration will then do nothing. In this case, while (box.lastChild) box.removeChild(box.lastChild) was faster because box.lastChild was null 99% of the time

Here is a proper test: https://jsperf.com/innerhtml-conspiracy

Finally, do not use node.parentNode.replaceChild(node.cloneNode(false), node). This will replace the node with a copy of itself without its children. However, this does not preserve event listeners and breaks any other references to the node.

@Marc M. 2020-07-28 08:05:59

elm.replaceChildren()

It's experimental without wide support, but when executed with no params will do what you're asking for, and it's more efficient than looping through each child and removing it. As mentioned already, replacing innerHTML with an empty string will require HTML parsing on the browser's part.

Documentation here.

@Harish Sharma 2020-07-11 16:32:37

You can remove all child elements from a container like below:

function emptyDom(selector){
 const elem = document.querySelector(selector);
 if(elem) elem.innerHTML = "";
}

Now you can call the function and pass the selector like below:

If element has id = foo

emptyDom('#foo');

If element has class = foo

emptyDom('.foo');

if element has tag = <div>

emptyDom('div')

@Anoop 2011-10-16 18:09:04

Other ways in jQuery

var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();

@bwindels 2015-06-01 16:28:51

Down-voting because OP said answers in straight DOM are preferred.

@YakovL 2018-08-06 17:55:02

Also, jQuery has .empty() method, just $("#foo").empty() would be enough

@Gabriel McAdams 2010-10-17 20:52:38

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 than innerHTML as browsers won't invoke their HTML parsers and will instead immediately replace all children of the element with a single #text node.

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 use lastChild as 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 firstChild just in case it's faster to check for firstChild than lastChild (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 #text nodes 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 lastElementChild in 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 Element prototype in JavaScript to simplify invoking it to just el.clearChildren() (where el is 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>

@jottos 2011-11-21 05:26:09

From jQuery these two issues might be considered: This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element. AND "To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves."

@m93a 2013-02-02 19:01:11

@micha I think your test is not right. I have written my one on jsfidle (jsfiddle.net/6K6mv/5) and here is the result. WHILE: 14ms; INNERHTML: 7ms; TEXTCONTENT: 7ms

@micha 2013-02-02 20:51:52

@m93a: running your fiddle multiple times gives me results all over the place between 6ms to 11ms. This is basically telling me nothing. The results are closer together than the variance in ms between each testrun for the same test. For the record: It's not MY script, its jsperf.com. Look at this for a better understanding of the test results: stackoverflow.com/a/5262617/859877 and stackoverflow.com/questions/4986245/how-does-jsperf-work/…

@m93a 2013-02-04 15:32:10

@micha Yes, I know what the test results mean, but it seems strange. It shows me thas innerHTML is 98% - 99% slower. And my tests show the opposite. But this is not a chat, I'm leaving discussion.

@Andrey Lushnikov 2013-02-19 12:59:48

Btw, using lastChild seem to be a bit more effective jsperf.com/innerhtml-vs-removechild/15

@stwissel 2013-03-27 14:45:05

innerHTML only works if you are only dealing with HTML. If there is e.g. SVG inside only Element removal will work

@Kenji 2013-09-21 15:40:59

NEVER NEVER NEVER use innerHTML = ''. Don't. The problem is that the items look like they're removed but internally, nodes persist and slow things down. You have to remove all the individual nodes for a reason. Tested in both Google Chrome and IE. Please consider removing the innerHTML "solution" since it's wrong.

@Joeytje50 2014-02-11 12:33:53

@micha jsperf.com/innerhtml-vs-removechild/151 using .remove() is even faster.

@micha 2014-02-12 03:21:58

@joeytje50 Nice one! Unfortunately it's DOM4 and not available everywhere. I'm sticking with .removeChild() for better compatibility. Besides, the gain of .remove() is only 2%.

@Abacus 2014-09-17 14:24:48

I put this in a prototype so I could use it more easily: Element.prototype.clear = function(){while (this.firstChild) {this.removeChild(this.firstChild);}}

@vsync 2014-09-18 13:18:53

@Kenji - what if I do document.documentElement.replaceChild(newBody, document.body) ? would the "old" elements and their events persist in memory? (when replacing the whole body element)

@Stefan Steiger 2015-01-09 09:10:55

@Andrey Lushnikov: Depends on which browser and which version. Actually firstChild ist best overall: jsperf.com/innerhtml-vs-removechild/250

@Chris Middleton 2015-05-13 00:17:55

@vsync I don't believe Kenji's comment is well-founded. Doing innerHTML = '' is slower, but I don't think it's "wrong". Any claims of memory leaks should be backed up with evidence.

@thdoan 2015-05-13 07:25:18

@Andrey Lushnikov firstChild and lastChild are pretty equivalent on my Chrome 43.0.2357.52 (first run removeChildFirst was a little faster, second run removeChildLast won), but both are winners over innerHTML.

@Pacerier 2015-06-03 04:45:05

@Kenji, Surely the browser is smart enough to prevent a memory leak. Have you managed to cause a memory leak in the browser?

@trlkly 2016-02-13 05:33:59

Your examples aren't wrong, but I think there's a pretty good case in this answer that the jsperf test was flawed, and didn't measure what it's supposed to. (The claim in the linked answer is that they were only removing empty divs, as they erroneously assumed that the DOM would be repopulated between each test.) In other words, innerHTML is faster, and there's an even faster method (replacing nodes with empty ones). Since your answer is so highly upvoted, it would be nice if you'd revert that part.

@gcampbell 2016-10-01 10:24:44

@Abacus Proceed with care and make sure your target audience's browsers work with it. perfectionkills.com/whats-wrong-with-extending-the-dom

@Marian07 2016-10-19 17:41:23

function emptyElement(element) { var myNode = element; while (myNode.firstChild) { myNode.removeChild(myNode.firstChild); } } emptyElement(document.body)

@Old Badman Grey 2017-01-27 19:18:26

(assuming its true) it would be nice to have the reason in the answer

@chharvey 2017-11-27 04:50:23

I tried myNode.childNodes.forEach(function (c) { c.remove() }), but this doesn't remove all the children. I realize some browsers don't support the method, but for the browsers that do support it, it doesn't remove all the nodes. Why does the while loop work better than NodeList#forEach()?

@Jim Pedid 2018-03-03 15:38:43

@chharvey You are modifying a collection that you are actively iterating over when you use forEach in that manner.

@Mars Robertson 2018-12-23 19:42:02

This is ridiculous. Why performance matters here? Is it 120 fps or one-off operation?

@Felipe 2019-01-11 20:39:40

I agree with @MichalStefanow. In this case, simplicity of code should precede the minimal performance gain, unless you are working on a specific scenario that requires this level of meticulous optimization. It will not make a difference when removing 5-15 nodes.

@Gutsygibbon 2020-02-03 02:46:32

As a new web developer, just wanna say u sir are a god. Thanks for both the methods. I have been playing around with both!

@OpenSauce 2020-05-07 09:27:54

remove gives an infinite loop for me on Brave 80.1.5.123. removeChild works fine

@Dolph Roger 2019-12-10 10:31:06

Functional only approach:

const domChildren = (el) => Array.from(el.childNodes)
const domRemove = (el) => el.parentNode.removeChild(el)
const domEmpty = (el) => domChildren(el).map(domRemove)

"childNodes" in domChildren will give a nodeList of the immediate children elements, which is empty when none are found. In order to map over the nodeList, domChildren converts it to array. domEmpty maps a function domRemove over all elements which removes it.

Example usage:

domEmpty(document.body)

removes all children from the body element.

@Thomas 2019-11-25 21:26:04

 let el = document.querySelector('#el');
 if (el.hasChildNodes()) {
      el.childNodes.forEach(child => el.removeChild(child));
 }

@blacksheep 2020-05-08 21:17:59

Its self explanatory

@npjohns 2014-04-09 15:04:29

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.

@bryc 2015-03-15 06:35:04

Your jsperf is completely broken. That's not very good evidence.

@npjohns 2015-04-28 04:29:40

Thanks for noting that, fixed it, insertBefore spec changed and no longer takes undefined for last param.

@Ben 2015-05-15 00:05:30

This is currently the best answer. Everything else in this thread is disinformation (!) Thanks for cleaning up all those bad old tests.

@user1106925 2016-06-04 02:29:03

"InnerHTML won't destroy your event handlers or mess up any jquery references" It will orphan data held in jQuery.cache, causing a memory leak because the only reference available to manage that data was on the elements you just destroyed.

@npjohns 2016-06-04 03:30:40

"InnerHTML won't destroy your event handlers or mess up any jquery references" refers to the container, not the children. cloneNode switches out the container, which means references to the container are not maintained (jquery or otherwise). Jquery's cache may make it worth using jquery to remove elements if you have jquery data attached to them. Hopefully they switch to WeakMaps at some point. Cleaning (or even the existence of) the $.cache doesn't appear to be officially documented.

@radl 2016-09-04 15:04:45

jsperf offline, would you mind uploading you test-code here, if you have it? I'd appriciate that!

@npjohns 2016-09-07 06:26:24

I don't have code, but jsperf is in the waybackmachine web.archive.org/web/20151008164028/http://jsperf.com/…

@Periata Breatta 2016-10-22 20:49:36

Just a random query: why does your benchmark include code for setting up the data that is going to be removed inside the benchmarked section? Surely the setup should be done outside of the benchmark, but all of your benchmarks call refreshRange() (which clones a set of test data into a new node) from within the test. How can you be sure that this isn't skewing the results?

@Periata Breatta 2016-10-22 20:54:08

Also, why are you using contents().remove() in your jquery tests (which builds an internal list of all of the child nodes and then removes them) rather than empty() (which just removes them)?

@Gregoire D. 2017-01-12 10:50:32

Still not a proper benchmark imo. nodes should be generated with attached events, attributes, functions, etc... for a more realistic benchmark. It kind of make sense that removeChild will remove attached resources while innerHTML might not, thus being slower, but if you benchmark without any attached resources it does not make sense.

@npjohns 2017-01-24 02:29:51

@PeriataBreatta The jsperf comments are lost, but what I was referring to about broken-ness was only performing removal once per test. Jsperf's "per-test-loop" often gets understood as "per-iteration", and then only the first iteration does any work and the results are meaningless. It would be ideal to set up outside of iteration, but as long as the setup is the same and minimized, the relative results are meaningful. I didn't know about empty(), thanks for the heads up, I'll fix it.

@npjohns 2017-01-24 02:41:38

@GregoireD. That info isn't really requested in the question, and I think the bigger concern for innerHTML usage in removing nodes is probably memory leaks more than performance, and throwing a leaky test premise in jsperf which has no ability to clean per-iteration would probably end up skewing the results

@senderle 2017-03-28 17:47:43

The jsperf tests are broken here. The test engine reports the following: "Error: Dom nodes not recreated during iterations, test results will be meaningless."

@thdoan 2019-02-14 08:01:52

cloneNode(false) is indeed superfast, but the problem is since it's destructive, you'll have to re-reference your variables, which is a big penalty, e.g.: jsperf.com/innerhtml-vs-removechild/467

@Scott Means 2020-08-17 09:14:00

I'm working on a DOM course and since it looks like jsperf.com is mia and might be for a while, I created a page on jsben.ch. As of today, innerHTML is still the winner. I've spent too long on this rabbit hole already, but in the year 2020 I have to wonder why we don't have a .clear() or .empty() DOM method yet...

@Gabe Halsmer 2013-04-02 18:02:22

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.

@cskwg 2019-01-03 10:51:41

Same thing without LINT warning: clear: function ( container ) { for ( ; ; ) { var child = container.lastChild; if ( !child ) break; container.removeChild( child ); } }

@emu 2018-12-06 20:03:15

Using a range loop feels the most natural to me:

for (var child of node.childNodes) {
    child.remove();
}

According to my measurements in Chrome and Firefox, it is about 1.3x slower. In normal circumstances, this will perhaps not matter.

@Ir Calif 2017-03-30 06:02:22

This is a pure javascript i am not using jQuery but works in all browser even IE and it is verry simple to understand

   <div id="my_div">
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
   </div>
   <button id ="my_button>Remove nodes ?</button>

   document.getElementById("my_button").addEventListener("click",function(){

  let parent_node =document.getElemetById("my_div"); //Div which contains paagraphs

  //Let find numbers of child inside the div then remove all
  for(var i =0; i < parent_node.childNodes.length; i++) {
     //To avoid a problem which may happen if there is no childNodes[i] 
     try{
       if(parent_node.childNodes[i]){
         parent_node.removeChild(parent_node.childNodes[i]);
       }
     }catch(e){
     }
  }

})

or you may simpli do this which is a quick way to do

document.getElementById("my_button").addEventListener("click",function(){

 let parent_node =document.getElemetById("my_div");
 parent_node.innerHTML ="";

})

@Harry Chilinguerian 2018-11-14 21:26:22

Just saw someone mention this question in another and thought I would add a method I didn't see yet:

function clear(el) {
    el.parentNode.replaceChild(el.cloneNode(false), el);
}

var myNode = document.getElementById("foo");
clear(myNode);

The clear function is taking the element and using the parent node to replace itself with a copy without it's children. Not much performance gain if the element is sparse but when the element has a bunch of nodes the performance gains are realized.

@Félix Gagnon-Grenier 2018-11-16 15:35:16

Actually it seems it was mentioned here stackoverflow.com/a/15441725/576767

@Harry Chilinguerian 2018-11-19 17:43:53

Felix I must have missed that, thanks for the correction +1.

@Ado Ren 2018-09-09 20:27:13

Here is what I usually do :

HTMLElement.prototype.empty = function() {
    while (this.firstChild) {
        this.removeChild(this.firstChild);
    }
}

And voila, later on you can empty any dom element with :

anyDom.empty()

@Vim Diesel 2019-10-26 17:50:23

I like this solution! Any reason I should use this over setting innerHTML to a blank string?

@Ado Ren 2019-10-26 21:51:13

performance : domEl.innerHTML = "" is poor and considered bad practice

@Mohit Karkar 2018-08-18 18:30:18

simple and fast using for loop!!

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

    for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
      myNode.removeChild(myNode.childNodes[i]);
    }

this will not work in <span> tag!

@Mohit Karkar 2018-08-18 18:33:07

in above all solution no code is removing <span> tag

@Henrik 2014-02-01 13:46:59

var empty_element = function (element) {

    var node = element;

    while (element.hasChildNodes()) {              // selected elem has children

        if (node.hasChildNodes()) {                // current node has children
            node = node.lastChild;                 // set current node to child
        }
        else {                                     // last child found
            console.log(node.nodeName);
            node = node.parentNode;                // set node to parent
            node.removeChild(node.lastChild);      // remove last node
        }
    }
}

This will remove all nodes within the element.

@Periata Breatta 2016-10-22 21:06:04

...because it's unnecessary complex, and no explanation is given as to how it works (which is actually non-obvious), I suspect.

@Neelansh Verma 2018-05-21 09:58:34

Why aren't we following the simplest method here "remove" looped inside while.

const foo = document.querySelector(".foo");
while (foo.firstChild) {
  foo.firstChild.remove();     
}
  • Selecting the parent div
  • Using "remove" Method inside a While loop for eliminating First child element , until there is none left.

@Ignacio Ara 2018-05-21 10:18:39

Please explain your lines of code so other users can understand its functionality. Thanks!

@Neelansh Verma 2018-05-21 11:16:31

@IgnacioAra Done!

@milosz 2018-02-05 14:24:27

The easiest way:

let container = document.getElementById("containerId");
container.innerHTML = "";

@Arjan 2018-03-26 07:07:33

While this works, beware that container.innerHTML = null would make Internet Explorer display the text null. So, this does not really remove the children, I'd say.

@Bjathr 2017-10-18 07:02:17

If you want to put something back into that div, the innerHTML is probably better.

My example:

<ul><div id="result"></div></ul>

<script>
  function displayHTML(result){
    var movieLink = document.createElement("li");
    var t = document.createTextNode(result.Title);
    movieLink.appendChild(t);
    outputDiv.appendChild(movieLink);
  }
</script>

If I use the .firstChild or .lastChild method the displayHTML() function doesnt work afterwards, but no problem with the .innerHTML method.

@r00t hkr 2017-07-13 21:14:53

Generally, JavaScript uses arrays to reference lists of DOM nodes. So, this will work nicely if you have an interest in doing it through the HTMLElements array. Also, worth noting, because I am using an array reference instead of JavaScript proto's this should work in any browser, including IE.

while(nodeArray.length !== 0) {
  nodeArray[0].parentNode.removeChild(nodeArray[0]);
}

@user2656596 2016-12-15 12:31:35

simply only IE:

parentElement.removeNode(true);

true - means to do deep removal - which means that all child are also removed

@everlasto 2017-11-29 18:22:43

IE? This is 21st century!

@Noitidart 2014-02-03 10:03:18

i saw people doing:

while (el.firstNode) {
    el.removeChild(el.firstNode);
}

then someone said using el.lastNode is faster

however I would think that this is the fastest:

var children = el.childNodes;
for (var i=children.length - 1; i>-1; i--) {
    el.removeNode(children[i]);
}

what do you think?

ps: this topic was a life saver for me. my firefox addon got rejected cuz i used innerHTML. Its been a habit for a long time. then i foudn this. and i actually noticed a speed difference. on load the innerhtml took awhile to update, however going by addElement its instant!

@Nikos M. 2014-10-05 21:11:58

well i think whether is fastest or not, some jsperf tests can prove either case

@Noitidart 2014-10-05 23:15:04

super work thanks for those tests. they dont include the for (var i=0... one though. But here is what i got when i ran those tests: i.imgur.com/Mn61AmI.png so in those three tests firstNode was faster than lastNode and innerHTML which is real cool

@Noitidart 2014-10-05 23:29:43

i added the tests: jsperf.com/innerhtml-vs-removechild/220 interesting stuff doing el.firstNode method is the fastest way it seems

@magiccrafter 2017-01-27 13:49:30

There are couple of options to achieve that:

The fastest ():

while (node.lastChild) {
  node.removeChild(node.lastChild);
}

Alternatives (slower):

while (node.firstChild) {
  node.removeChild(node.firstChild);
}

while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

Benchmark with the suggested options

@Chaitanya Bapat 2016-07-18 18:12:46

Simplest way of removing the child nodes of a node via Javascript

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

@Alexey 2014-01-27 11:08:29

innerText is the winner! http://jsperf.com/innerhtml-vs-removechild/133. At all previous tests inner dom of parent node were deleted at first iteration and then innerHTML or removeChild where applied to empty div.

@DanMan 2014-02-01 14:23:32

innerText is a proprietary MS thing though. Just saying.

@nrabinowitz 2015-12-10 01:05:09

Pretty sure this is a flawed test - it relies on box being available not as a var but through DOM lookup based on id, and since the while loop makes this slow call many times it's penalized.

@DanMan 2010-10-17 21:13:01

If you only want to have the node without its children you could also make a copy of it like this:

var dupNode = document.getElementById("foo").cloneNode(false);

Depends on what you're trying to achieve.

@Maarten 2012-06-18 21:56:45

Maybe you could even follow this with parent.replaceChild(cloned, original)? That might be faster than removing children one by one and should work on everything that supports the DOM (so every type of XML document, including SVG). Setting innerHTML might also be faster than removing children one by one, but that doesn't work on anything but HTML documents. Should test that some time.

@Matthew 2012-09-08 17:31:33

That won't copy event listeners added using addEventListener.

@DanMan 2014-02-01 14:21:52

If you can live with that limitation, it's certainly quick: jsperf.com/innerhtml-vs-removechild/137

@Nathan K 2014-03-11 20:27:27

Here's another approach:

function removeAllChildren(theParent){

    // Create the Range object
    var rangeObj = new Range();

    // Select all of theParent's children
    rangeObj.selectNodeContents(theParent);

    // Delete everything that is selected
    rangeObj.deleteContents();
}

@Polaris878 2015-01-05 23:05:33

This is interesting but it seems fairly slow compared to other methods: jsperf.com/innerhtml-vs-removechild/256

@bjb568 2014-03-28 17:13:36

element.textContent = '';

It's like innerText, except standard. It's a bit slower than removeChild(), but it's easier to use and won't make much of a performance difference if you don't have too much stuff to delete.

@check_ca 2014-04-23 09:45:29

A text node is not an element

@check_ca 2014-04-25 16:13:30

sorry you're right, it removes indeed all children elements

@pwdst 2017-03-29 15:18:24

This won't work in older versions of Internet Explorer.

@PleaseStand 2010-10-17 21:02:51

If you use jQuery:

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

If you don't:

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

@jeroen 2013-03-15 20:40:39

In response to DanMan, Maarten and Matt. Cloning a node, to set the text is indeed a viable way in my results.

// @param {node} node
// @return {node} empty node
function removeAllChildrenFromNode (node) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = removeAllChildrenFromNode( myNode );

Also this works for nodes not in the dom which return null when trying to access the parentNode. In addition, if you need to be safe a node is empty before adding content this is really helpful. Consider the use case underneath.

// @param {node} node
// @param {string|html} content
// @return {node} node with content only
function refreshContent (node, content) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  // use innerHTML or you preffered method
  // depending on what you need
  shell.innerHTML( content );

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = refreshContent( myNode );

I find this method very useful when replacing a string inside an element, if you are not sure what the node will contain, instead of worrying how to clean up the mess, start out fresh.

@Arun Aravind 2013-12-07 17:20:23

the worst thing ever. if you are replacing the original node with its clone, you are losing the reference to the original node. none of the event handlers and other bindings won't work.

Related Questions

Sponsored Content

46 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

18 Answered Questions

[SOLVED] Remove element by id

  • 2010-08-01 18:47:14
  • Zaz
  • 1548842 View
  • 1163 Score
  • 18 Answer
  • Tags:   javascript dom

96 Answered Questions

[SOLVED] Get all unique values in a JavaScript array (remove duplicates)

44 Answered Questions

[SOLVED] Remove empty elements from an array in Javascript

  • 2008-11-11 15:48:54
  • Tamas Czinege
  • 1044827 View
  • 1205 Score
  • 44 Answer
  • Tags:   javascript arrays

19 Answered Questions

14 Answered Questions

[SOLVED] Convert JavaScript String to be all lower case?

  • 2008-09-30 20:22:35
  • Derek
  • 451827 View
  • 1306 Score
  • 14 Answer
  • Tags:   javascript string

11 Answered Questions

[SOLVED] How can I add new array elements at the beginning of an array in Javascript?

  • 2011-11-10 00:35:22
  • Moon
  • 853573 View
  • 1655 Score
  • 11 Answer
  • Tags:   javascript arrays

16 Answered Questions

[SOLVED] How do I find out which DOM element has the focus?

  • 2009-01-30 20:21:31
  • Tony Peterson
  • 679347 View
  • 1338 Score
  • 16 Answer
  • Tags:   javascript dom

26 Answered Questions

[SOLVED] How can I tell if a DOM element is visible in the current viewport?

13 Answered Questions

[SOLVED] How to remove all CSS classes using jQuery/JavaScript?

  • 2009-09-15 03:34:21
  • Click Upvote
  • 552884 View
  • 785 Score
  • 13 Answer
  • Tags:   javascript jquery dom

Sponsored Content