Removing all elements of class after specific time

Question

I'm trying to remove all elements from the DOM of a specific class, after a specific timeout (waiting for an animation to finish).

I've tried using a for loop both on a live list (getElmentsByClassName) as well as in node list (querySelectorAll). In both cases, only one element is removed.

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>

I'm not sure why it's not working, and am looking for an explanation as to why it's executing in the manner it does and not actually removing all the elements.

Thank you!

(If you're kind enough to offer examples of working code, vanilla JS only please.)

Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) - `e` is declared globally and overwritten with each iteration. When your `remove()` executes, the loop has long-since finished, and left `e` equal to whatever it was set to last. — Tyler Roper, Apr 09 '19 at 02:42

Eddie · Answer 1 · 2019-04-09T03:00:35.263

2

One option is to pass the variable e (the element) on the setTimeout as the third parameter.

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>

edited Apr 09 '19 at 03:00

answered Apr 09 '19 at 02:45

Eddie

26,593
6
36
58

Note that even if it will do the job, not using `const`, `let` or even `var` will leak the `elems` and `e` identifiers to the global scope and make this code not strict. – Christian C. Salvadó Apr 09 '19 at 02:55
@CMS You are right. I missed that one. Added `let` :) – Eddie Apr 09 '19 at 02:56
still missing one for the `for (const e of elems) { ...`, which in turn will make unnecessary to pass the value via the setTimeout argument ;) – Christian C. Salvadó Apr 09 '19 at 03:00
1

Upvoted for pointing out I could pass the element as a third parameter, I should have referenced the spec before posting, thank you. – user2442072 Apr 09 '19 at 03:30

score 2 · Accepted Answer · answered Apr 09 '19 at 02:47

Well, if you declare your variable properly with let or const, it'll be fixed because e will be scoped to each iteration of the loop.

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

However, these multiple setTimeout calls are redundant. Just move your loop to a single callback.

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

score 0 · Answer 3 · answered Apr 09 '19 at 02:48

You can use forEach to loop through all the headers

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

score 0 · Answer 4 · answered Apr 09 '19 at 02:53

See the current code as you posted:

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>

Notice that e is calling only last header.

You can use the following:

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>

to remove all after delay. Or:

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>

to remove element 1 by 1 starting from the first.

Or from last:

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>

Removing all elements of class after specific time

4 Answers4