在特定时间后删除班级的所有元素

时间:2019-04-09 02:39:59

标签: javascript html css settimeout

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

4 个答案:

答案 0 :(得分: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>

答案 1 :(得分:2)

好吧,如果您使用.setFontSmoothingType()let正确声明了变量,它将得到修复,因为const的作用域是循环的每次迭代。

e

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

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

查看您发布的当前代码:

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>

从第一个元素开始将元素1删除。

或者从最后开始:

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>