如何删除具有相同名称但在不同时刻出现的新div？

Question

我有一个div，当您单击按钮时它会出现，并在4秒后被删除。
问题是当它出现多次时，它会在第一个4秒后立即被删除。
所以当我点击按钮时，div会显示出来，4秒后会被删除，但当我在3秒后再次点击按钮时，另一个div会出现并在1秒后被删除。
我想让每个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); 
}

- Styx25

Answer 1

记住你要添加的 div，然后只需删除它即可：

记住你要添加的 div，然后只需删除它即可：

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

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

我将函数名称更改为动词形式，并在函数内部使用div引用div。顺便说一下：我建议不要使用onXyz属性样式事件处理程序，因为这意味着您的事件处理程序函数必须是全局的，全局命名空间非常拥挤。相反，请选择按钮并使用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>

- T.J. Crowder

Answer 2

Create individual id instead of class .Because class name select the all same name of class element

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>

- prasanth

---

这个不需要使用 id。 - T.J. Crowder

没错，@T.J.Crowder。我刚刚发布了不同的方法。这并不是错误的，但也是其中一种方法。 - prasanth