javascript - 如何递归删除多个子节点而不弄乱索引？

代码:

<html>
    <head>
        <title>Foo</title>
        <script type="text/javascript">

var target;
var anchor;

function removeTags(node){
    for (var i = 0; i < node.childNodes.length; i++) {
        var childNode = node.childNodes[i];
        if (childNode.nodeType == 1) {
            node.removeChild(childNode);
            continue;
        } 
        removeTags(childNode);
    }
}

window.onload = function() {
    target = document.getElementById('target');
    anchor = document.getElementById('anchor');
    anchor.onclick = function() {
        removeTags(target);
    }
}

        </script>
    </head>
    <body>
        <div id="target">
            <p>
                <a href="#" id="anchor">Remove tags</a>
            </p>

            Text

            <p>Para 1</p>
            <p>Para 2</p>
            <p>Para 3</p>
            <p>Para 4</p>
            <p>Para 5</p>
            <p>Para 6</p>
            <p>Para 7</p>
            <p>Para 8</p>
            <p>Para 9</p>
            <p>Para 10</p>
            Text
        </div>
</html>

正如您在 JSFiddle URL 中注意到的那样，当您单击“删除标签”链接时，removeTags() 无法删除备用段落元素。原因是当 removeTags 从其父节点中删除子节点时，剩余的子节点在 node.childNodes 数组中向左移动一位。

如何巧妙地解决这个问题？

最佳答案

倒数:

for (var i = node.childNodes.length - 1; i >= 0; i--) {

Updated fiddle

或者，您可以使用 lastChild和 previousSibling :

var prev;
for (var child = node.lastChild; child; child = prev) {
    prev = child.previousSibling;

    if (child.nodeType == 1) {
        node.removeChild(child);
        continue;
    } 

    removeTags(child);
}

Updated fiddle

分别:

...the remaining child nodes shift one place to left in node.childNodes array...

NodeList s 不是数组。

关于javascript - 如何递归删除多个子节点而不弄乱索引？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9847377/

javascript - 如何递归删除多个子节点而不弄乱索引？

上一篇：javascript - 不引人注目的 JavaScript 方法，从文本文件获取数据并将其写入 HTML

下一篇：php - 将值从 PHP 传递到 Javascript 变量