我正在尝试在特定的超时(等待动画完成)之后从特定类的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。)

最佳答案

好吧,如果您使用letconst正确声明了变量,它将得到修复,因为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);
}

10-05 20:48
查看更多