JS Removechild只能工作一半

Question

var graph = document.getElementById('graph');
Array.prototype.forEach.call(document.getElementsByClassName('release'),graph.removeChild.bind(graph));

在Firefox和Safari中（尚未测试过其他人），这仅消除了均匀的索引元素，为什么？

将HTMLCollection从0到正确的长度增加1，并且所有元素都存在。我也以正常的循环行为获得了相同的行为，因此可能并不是某些奇怪的事情不兼容。实际上，如果我改用函数function(e,i,a){console.log(e.innerHTML);graph.removeChild(e)}，则所有InnerHTML都会被记录，但仍然只有均匀的索引节点被删除。

Answer 1

这是因为您使用的是返回实时HTMLCollection的getElementsByClassName。因此，发生的事情是，一旦删除了该项目的索引（收集自动更新），这将导致未删除的剩余项目。

var graph = document.getElementById('graph');
Array.prototype.forEach.call(document.getElementsByClassName('release'), graph.removeChild.bind(graph));

<div id="graph">
    <div class="release">release 1</div>
    <div class="release">release 2</div>
    <div class="release">release 3</div>
</div>

使用非活节点符，例如由querySelectorAll返回：

var graph = document.getElementById('graph');
Array.prototype.forEach.call(document.querySelectorAll('.release'), graph.removeChild.bind(graph));

var graph = document.getElementById('graph');
Array.prototype.forEach.call(document.querySelectorAll('.release'), graph.removeChild.bind(graph));

<div id="graph">
    <div class="release">release 1</div>
    <div class="release">release 2</div>
    <div class="release">release 3</div>
</div>