JS：使用for循环删除多个子节点？

Question

我想执行一个函数，该函数遍历元素的子节点并随后删除每个子节点。

在我当前的设置中，出于某种原因，只有一些子节点被删除，有些则没有。该函数需要多次运行才能删除所有节点。为什么不立即删除所有节点？

这是代码的简化版本：

const deleteBtn = document.getElementById("deleteBtn");
const sidebar = document.getElementById("sidebar");

deleteBtn.addEventListener("click", () => {
  const links = sidebar.children;
  console.log(links)

  for (let i = 0; i < links.length; i++) {
    const link = links[i];
    link.remove()
  }
})

.sidebar__link-group {
  display: flex;
  flex-direction: column;
}

<button id="deleteBtn" >Click to delete all links</button>

<div id="sidebar" class="sidebar__link-group">
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
</div>

Answer 1

正如 Pablo 所说，我认为问题可能在于您正在从正在迭代的列表中删除项目（尽管如果那是问题所在，我希望看到更多链接，所以我我不确定...)

无论如何，我认为反向迭代列表并像这样删除它们可能会解决问题，那么这个怎么样？:

const deleteBtn = document.getElementById("deleteBtn");
const sidebar = document.getElementById("sidebar");

deleteBtn.addEventListener("click", () => {
  const links = sidebar.children;
  console.log(links)

  for (let i = links.length - 1; i >= 0; i--) {
    const link = links[i];
    link.remove()
  }
})

.sidebar__link-group {
  display: flex;
  flex-direction: column;
}

<button id="deleteBtn" >Click to delete all links</button>

<div id="sidebar" class="sidebar__link-group">
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
</div>

[编辑]

通过一些测试，我很确定 Pablo 是正确的——当你做类似 x = document.getElementById('someid').children 的事情，然后你做类似 x[1].remove() 的事情时，实际的数组 x现在的长度比开始时少 1。这就是向后迭代它的原因。

Answer 2

当您删除第 0 个元素时，第 1 个元素变为第 0 个元素，第 2 个元素变为第 1 个元素，依此类推，因此在您的第一个 i++ 之后，您将删除“原始的第 2 个”元素，依此类推；这就是为什么您的算法只删除每隔 children 而不是每个 children.

这通常是您想要使用 while 而不是数组迭代的那种算法：

const deleteBtn = document.getElementById("deleteBtn");
const sidebar = document.getElementById("sidebar");

deleteBtn.addEventListener("click", () => {
  while(sidebar.children.length > 0) {
    sidebar.children[0].remove();
  }
  console.log('done');
})

.sidebar__link-group {
  display: flex;
  flex-direction: column;
}

<button id="deleteBtn" >Click to delete all links</button>

<div id="sidebar" class="sidebar__link-group">
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
</div>

Answer 3

你可以这样做：

const deleteBtn = document.getElementById("deleteBtn");
const sidebar = document.getElementById("sidebar");

deleteBtn.addEventListener("click", () => {
  while(sidebar.firstChild) {
    sidebar.children[0].remove();
  }
  console.log('done');
})

.sidebar__link-group {
  display: flex;
  flex-direction: column;
}

<button id="deleteBtn" >Click to delete all links</button>

<div id="sidebar" class="sidebar__link-group">
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
</div>

如果你在删除之前不需要检查任何东西，你也可以试试这个：

const deleteBtn = document.getElementById("deleteBtn");
const sidebar = document.getElementById("sidebar");

deleteBtn.addEventListener("click", () => {
  sidebar.innerHTML="";
  console.log('done');
})

.sidebar__link-group {
  display: flex;
  flex-direction: column;
}

<button id="deleteBtn" >Click to delete all links</button>

<div id="sidebar" class="sidebar__link-group">
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
  <a class="sidebar__link" href="#">Some link</a>
</div>

JS：使用for循环删除多个子节点？

JS: Deleting multiple child nodes with for-loop?

javascript

iteration

loops

for-loop

child-nodes