Recursively remove all nested nodes in javascript

Question

I've been trying to write something to remove all nodes within an element, including the nodes within those nodes. I feel like I've come pretty close with this

function clear(node) {
    var l = node.childNodes.length;
    for (var i = 0; i < l; i++) {
        console.log(i, node.childNodes);
        var child = node.childNodes[i];

        if (!child.hasChildNodes()) {
            var newchild = child.parentNode;
            newchild.removeChild(child);
            console.log("removed" + child);
            clear(newchild);
        } else {
            clear(child);
        }
    }
}

And the markup looks something like this

<div>
    <canvas></canvas>
    <div id="diagbox">
        <div id="diag_text">Here's some text</div>
    </div>
    <ul id="option_ul">
        <li>Some text</li>
        <li>Some text</li>
    </ul>
</div>

And this is how far it gets before failing:

<div>
    <div id="diagbox">
        <div id="diag_text"></div>
    </div>
    <ul id="option_ul">
    </ul>
</div>

It removes the text node in diag_text, but fails to remove the actual div. It also removes the text nodes in the li elements, and for some reason succeeds to remove the li elements as well, but stops at the ul. The canvas is also succesfully removed, which is odd because it's top level and I was assuming that's why the others weren't working. The whole thing stops because at some point a TypeError occurs, "child is undefined".

Not quite sure where I'm going wrong here

EDIT: Definitely should have specified: I'm wanting to go through and remove all of the nodes and not just the parents because the content of these elements are actually dynamically generated and need to be scrubbed for different use cases.

What do you want your final result to be? Also, you should be checking to make sure `child` is actually defined before trying to attempt to do stuff with it. Also, is there any reason you are deleting by the children instead of just deleting the parent node? — Adjit, Aug 27 '15 at 21:43
Yes I guess I should have specified, there is a reason I'm not simply deleting the parent nodes. These elements are dynamically generated, and need to be scrubbed for different use cases — lyon, Aug 28 '15 at 01:06
The problem in your code is the for loop, when you remove node.childNodes[i], having incremented the iterator, the node that was formerly node.childNodes[i+1] becomes [i] and gets skipped. Hint - repeatedly remove node.childNodes[0] (or .firstChild). — James, Aug 28 '15 at 04:23
With respect to the posted html, what you want to left-out ? — , Aug 28 '15 at 05:39

Maximillian Laumeister · Accepted Answer · 2015-08-28T04:08:24.443

I think the recursive solution may be a lot simpler than you had in mind.

This function will delete each node only after all of its child nodes have been deleted, so you can scrub/free any resources you need to reclaim.

Working Live Example (open console):

var n = document.getElementById("parent");

function clearInner(node) {
  while (node.hasChildNodes()) {
    clear(node.firstChild);
  }
}

function clear(node) {
  while (node.hasChildNodes()) {
    clear(node.firstChild);
  }
  node.parentNode.removeChild(node);
  console.log(node, "cleared!");
}

clearInner(n);

<div id="parent">
  <div></div>
  <div></div>
  <div>
    <div></div>
    <div></div>
    <div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div></div>
  <div></div>
</div>

I do think I'm overcomplicating it, and your solution is so close to what I'm looking for, but the only thing is that I need the parent node (in this case, n) to not be removed as well — lyon, Aug 28 '15 at 04:05

score 3 · Answer 2 · answered Aug 28 '15 at 04:34

3

Why not just

var n = document.getElementById("parent");

n.innerHTML="";

answered Aug 28 '15 at 04:34

chiliNUT

18,989
14
66
106

I believe you can do that. A lot more's discussed here: https://stackoverflow.com/a/3955238/5065946 – powersource97 Jul 27 '21 at 19:32

score 2 · Answer 3 · answered Aug 27 '15 at 21:38

Firstly you don't need to remove the child nodes. Removing the parent will do the trick. So, something of the form:

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

will do the trick.

As to your specific question: childNodes is dynamic. As your remove elements it changes, so indexing into it from a static length will not work. You will note that in my example above I only ever look at firstChild, since after each removeChild it will point to a new element.

So to fix your code either use something dynamic like this or process the array in reverse:

for (var i = l - 1; i >= 0; i--) {...

This will work because you are chopping nodes from the end and the previous children remain in place.

Sorry! Definitely should have specified: I'm wanting to go through and remove all of the nodes and not just the parents because the content of these elements are actually dynamically generated and need to be scrubbed for different use cases. -- gonna give it a shot going through it in reverse and using firstChild once I get a chance to get at it again, thanks — lyon, Aug 28 '15 at 01:07

Recursively remove all nested nodes in javascript

3 Answers3