在特定时间后删除类的所有元素答案

【问题标题】：Removing all elements of class after specific time在特定时间后删除类的所有元素
【发布时间】：2019-04-09 02:39:59
【问题描述】：

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

【问题讨论】：

JavaScript closure inside loops – simple practical example - e 的可能重复被全局声明并被每次迭代覆盖。当你的remove() 执行时，循环已经完成很久了，并且留下e 等于它设置的任何内容。

标签： javascript html css settimeout

【解决方案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);
}

【讨论】：

【解决方案2】：

一种选择是将setTimeout 上的变量e（元素）作为第三个参数传递。

function removeElems() {
  let elems = document.querySelectorAll('.header');
  for (const e of elems) {
    setTimeout(function(o) {        //2. Receive the element in variable o
      o.remove();                   //3. Remove the o variable
    }, 1000, e);                    //1. Pass the element here
  }
}

removeElems();

<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>

【讨论】：

请注意，即使它可以完成这项工作，不使用const、let 甚至var 也会将elems 和e 标识符泄漏到全局范围并使其代码不严格。
@CMS 你是对的。我错过了那个。已添加let :)
对于for (const e of elems) { ... 仍然缺少一个，这反过来将不需要通过 setTimeout 参数传递值 ;)
赞成指出我可以将元素作为第三个参数传递，我应该在发布之前参考规范，谢谢。

【解决方案3】：

您可以使用 forEach 循环遍历所有标题

function removeElems() {
  const parent = document.getElementById('container');
  const elems = document.querySelectorAll('.header');
  elems.forEach((node) => {
    setTimeout(function() {
    parent.removeChild(node);
   }, 1000);
 });
}

【讨论】：

【解决方案4】：

查看您发布的当前代码：

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

removeElems();

<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>

请注意，e 仅在最后一次调用 header。

您可以使用以下内容：

function removeElems() {
    elems = document.querySelectorAll('.header');
    for(let i = 0; i < elems.length; i++) {
        setTimeout(function() { 
          elems[i].remove(); 
        }, 1000 );
    }
}

removeElems();

<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>

延迟后全部删除。或者：

var i = 0;
var elems = document.querySelectorAll('.header');
function removeElems() {
    if( i < elems.length) {
        setTimeout(function() { 
         elems[i].remove();
         i++;
         removeElems();
        }, 1000 );
    }
}

removeElems();

<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>

从第一个开始逐个删除元素。

或从上一个：

var elems = document.querySelectorAll('.header');
var i = elems.length-1;
function removeElems() {
    if( i >= 0) {
        setTimeout(function() { 
         elems[i].remove();
         i--;
         removeElems();
        }, 1000 );
    }
}

removeElems();

<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>

【讨论】：