Удаление всех элементов класса после определенного времени - PullRequest
Новая
       7

Удаление всех элементов класса после определенного времени

0 голосов
/ 09 апреля 2019

Я пытаюсь удалить все элементы из DOM определенного класса после определенного времени ожидания (ожидание завершения анимации).

Я пытался использовать цикл for как в реальном списке (getElmentsByClassName), так и в списке узлов (querySelectorAll). В обоих случаях удаляется только один элемент. 

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>

Я не уверен, почему это не работает, и ищу объяснение, почему он работает так, как он работает, а не удаляет все элементы.

Спасибо!

(Если вы любезны предложить примеры работающего кода, ванильный JS только, пожалуйста.)

Ответы [ 4 ]

2 голосов
/ 09 апреля 2019

Что ж, если вы правильно объявите свою переменную с помощью 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 голосов
/ 09 апреля 2019

Один из вариантов - передать переменную e (элемент) в setTimeout в качестве третьего параметра. 

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>
0 голосов
/ 09 апреля 2019

См текущий код, как вы отправили: 

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 на 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>
0 голосов
/ 09 апреля 2019

Вы можете использовать forEach для циклического перебора всех заголовков 

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