Javascript 为什么要遍历所有div'；s childs+；只有在X使用后才能删除它们？

为什么此代码在第一次使用后不删除所有节点，但在第二次或第三次使用后会删除

function remove()
{
    var nodes = document.getElementById("test").childNodes;

    for (var i=0; i<nodes.length; i++)
    {
      nodes[i].parentNode.removeChild(nodes[i]);
    }
}

函数删除（）
{
var nodes=document.getElementById（“test”）.childNodes；
对于（var i=0；i，因为一旦删除一个节点，整个列表就不再相同，因此其他删除对象不再存在

这要容易得多，而且可以做到：

function remove() {
  document.getElementById("test").innerHTML = '';
}

工作示例：


函数删除（）{
document.getElementById（“test”）.innerHTML=''；
}
按钮
{
高度：50px；
宽度：150px；
}
红色
{
背景色：红色；
宽度：250px；
}
绿色
{
背景颜色：绿色；
宽度：250px；
}

A.
B
点击我
因为删除时忘记了某个节点

第一个电话
要删除节点的每个子节点，它会向后移动以防止出现此问题

或者保留您的逻辑，只删除第一个值，因为元素在每个元素上都有一个索引

for (var i=0; i<nodes.length; i++)
{
    nodes[0].parentNode.removeChild(nodes[0]);
}

for（var i=0；iBecause
childNodes
在添加/删除元素时更新。相反，使用
var parent=document.getElementById（'test'）；而使用（parent.firstChild）parent.removeChild（parent.firstChild）
@NiettheDarkAbsol把它写下来作为答案，这样我就可以接受了loop@Andreas但如果我能举例说明，我不确定我的措辞是否足够好
var nodes = document.getElementById("test").childNodes;
console.log(nodes)// NodeList(5) [ div.red, div.green ]

// here's what append in for loop
// i | nodes[i]  | nodes
// 0 | div.red   | div.red, div.green
// 1 | undefined | div.green
for (var i=0; i<nodes.length; i++)
{
    nodes[i].parentNode.removeChild(nodes[i]);
}

var nodes = document.getElementById("test").childNodes;
console.log(nodes)// NodeList(5) [ div.green ]

// here's what append in for loop
// i | nodes[i]  | nodes
// 0 | div.green | div.green
for (var i=0; i<nodes.length; i++)
{
    nodes[i].parentNode.removeChild(nodes[i]);
}

let last; while (last = node.lastChild) node.removeChild(last);

for (var i=0; i<nodes.length; i++)
{
    nodes[0].parentNode.removeChild(nodes[0]);
}