¿Cómo puedo eliminar div usando for loop con retraso de 5 segundos

Question

Me gustaría eliminar el grupo de div. Toda la clase de etiqueta div = "mt1" puedo eliminar el primer elemento. Pero me gustaría hacerlo todo con 5 segundos de retraso.

Código 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>

Mi código JS:

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

Mi código elimina el primer elemento de div. Quiero que se repita cada 5 segundos. ¿Cualquier sugerencia?

javascript jquery html loops for-loop

1

Hallowen 7 oct. 2019 a las 01:57

Answer 1

Una opción es tener una función recursiva que tome el índice del elemento para desvanecerse, y lo desvanece si existe, volviéndose a llamar con el siguiente i. Use div.eq(i) para seleccionar el i th niño:

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>

Si los elementos ya no necesitan existir en el DOM después de desvanecerse, puede .remove() hacer el código más agradable:

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>

2

CertainPerformance 6 oct. 2019 a las 23:15

Answer 2

Suena como un trabajo para setInterval:

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

0

pguardiario 7 oct. 2019 a las 01:15

Answer 3

Puedes probar esto:

let child = 0;

setInterval(()=>{

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

child++;

},5000);

0

Dino 7 oct. 2019 a las 07:20

¿Cómo puedo eliminar div usando for loop con retraso de 5 segundos

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript