如何删除具有相同名称但在不同时间的新div

Question

单击按钮时会出现一个div，并在4秒后删除。 问题是，当它出现几次时，它会在前4秒后立即被删除 因此，当我单击按钮时，会显示div，并在4秒后将其删除，但是当我在3秒后再次单击该按钮时，将出现另一个将在1秒内删除的div。 我希望每个div有4秒钟，你不知道怎么做吗？

HTML

<button onclick='div()'>Add div</button>
<div class='content'></div>

JavaScript的

function div(){
 $('.content').append('<div class="newDiv">text...</div>');

 setTimeout(function(){
   $('.newDiv').remove();
 }, 4000); 
}

Answer 1

记住你要添加的div，然后删除那个：

function addDiv(){
    var div = $('<div class="newDiv">text...</div>');
    $('.content').append(div);

    setTimeout(function(){
        div.remove();
    }, 4000); 
}

（我更改了函数的名称，因为函数名称应该是动词，我在函数中使用div来引用div。）

旁注：我建议不要使用onXyz-attribute-style事件处理程序，尤其是因为它意味着您的事件处理函数必须是全局的，并且全局命名空间非常拥挤。相反，选择按钮并使用on：

$("selector-for-the-button").on("click", addDiv);

实例：

// Scoping function to avoid creating globals
(function() {
    var counter = 0; // Just for demonstration purposes, so we can tell them apart
    function addDiv(){
        var div = $('<div class="newDiv">div #' + counter + '...</div>');
        ++counter;
        $('.content').append(div);

        setTimeout(function(){
            div.remove();
        }, 1200); // Shortened time for demo
    }
    $(".add-div").on("click", addDiv);
})();

<button class="add-div">Add div</button>
<div class='content'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

创建单独的id而不是class。因为类名选择class元素的所有相同名称

var inc = 0;

function div() {
  var id = "newDiv_" + inc;
  $('.content').append('<div id="' + id + '">text' + inc + '...</div>');

  setTimeout(function() {
    $('#' + id).remove();
  }, 4000);
  inc++;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick='div()'>Add div</button>
<div class='content'></div>