dom - Recursively remove all nested nodes in javascript - Stack Overflow

admin管理员组

文章数量:1287505

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 e 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.

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 e 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.

• javascript
• dom
• recursion

Share Improve this question Follow edited Aug 28, 2015 at 4:49 Lee Taylor 7,9941616 gold badges3737 silver badges5353 bronze badges asked Aug 27, 2015 at 21:21 lyonlyon 4522 silver badges55 bronze badges 4

• 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 Commented Aug 27, 2015 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 Commented Aug 28, 2015 at 1:06
• 1 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] bees [i] and gets skipped. Hint - repeatedly remove node.childNodes[0] (or .firstChild). – James Commented Aug 28, 2015 at 4:23
• With respect to the posted html, what you want to left-out ? – user2575725 Commented Aug 28, 2015 at 5:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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>

Why not just

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

n.innerHTML="";

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.

本文标签： domRecursively remove all nested nodes in javascriptStack Overflow