CODEWITHSUNDEEP
javascriptdomrecursion
lyon
lyon

Reputation: 45

Recursively remove all nested nodes in javascript

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.

Upvotes: 4

Views: 7604

Answers (3)

chiliNUT
chiliNUT

Reputation: 19573

Why not just

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

n.innerHTML="";

Upvotes: 3

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20368

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>

Upvotes: 5

Paul Marrington
Paul Marrington

Reputation: 557

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.

Upvotes: 2

Related Questions