Question

我有以下代码，它使用classname foo查找文档中的所有元素，然后将它们全部删除

        function(doc) {
            var items = doc.getElementsByClassName('foo');
            alert(items.length);
            if(items.length>0) {
                for(var i=0;i<items.length;i++) {
                    alert(i);
                    doc.body.removeChild(items[i]);
                }
        }

例如，items.length为3，运行一个循环后函数退出，当长度为8时，退出为3.任何帮助都将非常感激。此外，当我一次又一次地运行该函数时，它最终会删除所有元素。

Answer 1

您的问题是NodeList返回的getElementsByClassName()是有效的。首先将其转换为数组，如Felix建议或向后迭代：

var items = doc.getElementsByClassName('foo');
var i = items.length;
while (i--) {
    items[i].parentNode.removeChild(items[i]);
}

这是有效的，因为每次迭代从列表中删除的项目是列表中的最后一项，因此不会影响先前的项目。

我还将doc.body更改为items[i].parentNode以获得更大的一般性，以防您需要处理不属于<body>元素的直接子元素的元素。

Answer 2

问题是items是实时 NodeList，即无论何时访问列表的属性（items.length），都会重新评估列表（再次搜索元素。）由于您在此期间删除了元素，因此列表会变短，但您保留索引。

您可以先将NodeList转换为数组：

var items = [].slice.call(doc.getElementsByClassName('foo'));

删除DOM元素时，数组大小不会发生变化。

removechild循环在完成之前退出

2 个答案: