4

我有以下代码，它在文档中找到类名 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 处退出。任何帮助将不胜感激。此外，当我一次又一次地运行该函数时，它最终会删除所有元素。

4

2 回答 2

11

您的问题是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>元素。

于 2012-06-21T23:09:45.107 回答
9

问题在于它items是一个live NodeList，即每当您访问列表 ( items.length) 的属性时，都会重新评估列表（再次搜索元素）。
由于您同时删除了元素，因此列表变得更短，但您保留了索引。

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

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

删除 DOM 元素时，数组大小不会改变。

于 2012-06-21T23:09:00.143 回答