javascript - 在特定时间后删除类的所有元素

Question

我试图在特定超时后(等待动画完成)从特定类的 DOM 中删除所有元素。

我已经尝试在实时列表 (getElmentsByClassName) 和节点列表 (querySelectorAll) 中使用 for 循环。在这两种情况下，都只删除了一个元素。

function removeElems() {
  elems = document.querySelectorAll('.header');
  for (e of elems) {
    setTimeout(function() {e.remove();}, 1000);
  }
}

<div id="container">
  <div class="header">1</div>
  <div class="header">2</div>
  <div class="header">3</div>
  <div class="header">4</div>
  <div class="header">5</div>
  <div class="header">6</div>
</div>

我不确定它为什么不起作用，我正在寻找一个解释，说明它为什么以它的方式执行，而不是实际删除所有元素。

谢谢!

(如果您愿意提供工作代码示例，请仅使用 vanilla JS。)

Answer 1

好吧，如果您使用 let 或 const 正确声明您的变量，它将被修复，因为 e 将被限制在每次迭代中循环的。

function removeElems() {
  const elems = document.querySelectorAll('.header');
  for (const e of elems) {
    setTimeout(function() {e.remove();}, 1000);
  }
}

但是，这些多个 setTimeout 调用是多余的。只需将循环移动到单个回调即可。

function removeElems() {
  const elems = document.querySelectorAll('.header');
  setTimeout(function() {
    for (const e of elems) {
      e.remove();
    }
  }, 1000);
}