Как я могу удалить Div, используя для цикла с задержкой 5 секунд

Question

Я хотел бы удалить группу div. Все теги div's class = "mt1" я могу удалить первым элементом. Но я хотел бы сделать все это с 5 секундной задержкой.

HTML-код:

<div class="mgroup">
   <div class="mt1">Text 1</div> // wait 5 second and delete
   <div class="mt1">Text 2</div> // wait 5 second and delete
   <div class="mt1">Text 3</div> // wait 5 second and delete
   <div class="mt1">Text 4</div> // wait 5 second and delete
   <div class="mt1">Text 5</div> // wait 5 second and delete
</div>

Мой код JS:

var div = $('.mt1');
if(div.lenght >0)
{
   var parent = div.first();
   parent.fadeOut("fast", function(){ parent.remove(); } );
}

Мой код удаляет первый элемент div,Я хочу, чтобы это повторялось каждые 5 секунд. Любое предложение?

Answer 1

Один из вариантов - иметь рекурсивную функцию, которая берет индекс элемента, который должен исчезнуть, и исчезает, если он существует, вызывая себя снова со следующим i. Используйте div.eq(i) для выбора i-го ребенка:

const fadeOutNext = (i) => {
  var div = $('.mt1');
  if (!div[i]) {
    return;
  }
  div.eq(i).fadeOut("fast", function() {
    setTimeout(fadeOutNext, 5000, i + 1);
  });
};

fadeOutNext(0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mgroup">
  <div class="mt1">Text 1</div> // wait 5 second and delete
  <div class="mt1">Text 2</div> // wait 5 second and delete
  <div class="mt1">Text 3</div> // wait 5 second and delete
  <div class="mt1">Text 4</div> // wait 5 second and delete
  <div class="mt1">Text 5</div> // wait 5 second and delete
</div>

Если элементам больше не нужно существовать в DOM после исчезновения, вы можете .remove(), чтобы сделать код лучше:

const fadeOutNext = () => {
  var div = $('.mt1');
  if (!div.length) {
    return;
  }
  div.eq(0).fadeOut("fast", function() {
    $(this).remove();
    setTimeout(fadeOutNext, 5000);
  });
};

fadeOutNext();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mgroup">
  <div class="mt1">Text 1</div> // wait 5 second and delete
  <div class="mt1">Text 2</div> // wait 5 second and delete
  <div class="mt1">Text 3</div> // wait 5 second and delete
  <div class="mt1">Text 4</div> // wait 5 second and delete
  <div class="mt1">Text 5</div> // wait 5 second and delete
</div>

Answer 2

Похоже на задание для setInterval:

var interval = setInterval(function(){
    var div = $('.mt1').first()
    div[0] ? div.fadeOut("fast", function(){ div.remove() } ) : clearInterval(interval)
}, 5000)

Answer 3

Вы можете попробовать это:

let child = 0;

setInterval(()=>{

const c = $('.mt1:nth-child('+child+')');
c.fadeOut("fast", function(){ c.remove(); } );

child++;

},5000);