logo标签列表

删除子元素的循环在完成之前退出

javascriptdom
5
我有下面一段代码，它能找到文档中所有类名为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处退出。非常感谢您的任何帮助。另外，当我反复运行函数时，它最终会删除所有元素。
2个回答
12

你遇到的问题是 getElementsByClassName() 返回的 NodeList 是动态的。要么像 Felix 建议的那样先将其转换为数组，要么反向迭代：

var items = doc.getElementsByClassName('foo');
var i = items.length;
while (i--) {
    items[i].parentNode.removeChild(items[i]);
}
这行代码能正常工作是因为每次迭代删除的项都是列表中的最后一项，因此不会影响之前的项。
我还将doc.body更改为items[i].parentNode，以增加通用性，以防需要处理不是直接放置在<body>元素下的元素。
9
问题在于items是一个动态的NodeList，也就是说，每当您访问列表的属性（items.length）时，列表会重新计算（元素再次搜索）。
由于您同时删除了元素，所以列表变短了，但是索引保留了下来。

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

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接