Может JQuery это сделать?

Question

Я хочу создать div и удалить его через 5 секунд, у меня проблема в том, что myscript удаляет все div одновременно, и я хочу, чтобы вы удалили div в порядке создания, один за другим.

Вот мой скрипт до сих пор:

$(document).ready(function(){
  $(".create").click(function(){
  
  //HERE I CREATE THE DIVS
  $('.divs').append('<div class="deleteon5seconds">Hello</div>');
  //HERE FINISH CREATE THE DIVS
  
  });
});

//HERE I DELETE THE DIVS IF IT EXIST
var $auto_refresh = setInterval(function () {
    var $articleCount = $('.deleteon5seconds').length; 

    while ($articleCount > 0) {
        $('.deleteon5seconds:last-child').remove();
        $articleCount = $('.deleteon5seconds').length;
    }

    $autoUpdate();
}, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button class="create">Create</button>
<div class="divs"></div>

Все это пример, цель кода - показывать алерты. Мне нужна помощь, пожалуйста! Расширенное спасибо !!

Answer 1

Итак, если я понимаю, о чем вы спрашиваете, для каждого созданного div вам нужно будет получить ссылку на этот новый div, а затем использовать setTimeout (не setInterval) для каждого из них с интервалом в 5 секунд, который удалит этот конкретный div. Это делает так, что каждый новый div будет жить в течение 5 секунд, а затем исчезнет.

var count = 1;
$(document).ready(function(){
  $(".create").click(function(){
  
  //HERE I CREATE THE DIVS
  var div = $('.divs').append('<div class="deleteon5seconds">Hello' + count++ + '</div>');
  var elem = $('.divs div.deleteon5seconds').last();
  //HERE FINISH CREATE THE DIVS

  setTimeout(() => elem.remove(), 5000);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button class="create">Create</button>
<div class="divs"></div>

Я добавил часть count, чтобы упростить отслеживание того, какой div какой.

Answer 2

Вы можете удалить первый созданный элемент этого класса с помощью $ ('div.deleteon5seconds'). First (). Remove ();

.first () Описание: Уменьшите набор совпадающих элементов до первого в наборе.

Проблема в том, что вы добавили while, и он удаляет их все. Проверьте мою скрипку

$(document).ready(function(){
  $(".create").click(function(){
  
  //HERE I CREATE THE DIVS
  $('.divs').append('<div class="deleteon5seconds">Hello</div>');
  //HERE FINISH CREATE THE DIVS
  
  });
});

//HERE I DELETE THE DIVS IF IT EXIST
var auto_refresh = setInterval(function () {
    var articleCount = $('.deleteon5seconds').length; 

    if (articleCount > 0) {
    
        $('div.deleteon5seconds:first-of-type').remove();
        articleCount = $('.deleteon5seconds').length;
    }

}, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="create">Create</button>
<div class="divs"></div>