Javascript 如何在不同的时间删除同名的新div

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

HTML

添加div

JavaScript

函数div（）{
$（'.content'）.append（'text…'）；
setTimeout（函数（）{
$（'.newDiv'）.remove（）；
}, 4000); 
}

记住要添加的div，然后删除该div：

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

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

实例：

//用于避免创建全局变量的作用域函数
（功能（）{
var counter=0；//只是为了演示，所以我们可以区分它们
函数addDiv（）{
var div=$（'div#'+计数器+'…'）；
++计数器；
$（'.content'）.append（div）；
setTimeout（函数（）{
div.remove（）；
}，1200）；//缩短了演示时间
}
美元（“.add div”）。单击（“单击”，addDiv）；
})();
添加div
创建单个
id
而不是
class
。因为类名选择了类元素的所有相同名称
var inc=0；
函数div（）{
var id=“newDiv”+inc；
$（'.content'）.append（'text'+inc+'…'）；
setTimeout（函数（）{
$（'#'+id）.remove（）；
}, 4000);
inc++；
}

添加div
这个不需要
id
s.ya..right@T.J.Crowder。我只是发布了不同的方法。这不是错误的，但也是方法之一
function div(){
 $('.content').append('<div class="newDiv">text...</div>');

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

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

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

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