javascript在tot秒后单独附加元素并删除，而不是全部一起添加

在一个div中，我附加了各种通知div，这些通知基于用户执行的某些选项显示，因此它们的数量可能会增加，我希望能够在一段时间后以相互独立的方式删除它们，而不是全部删除

例如，如果我们有3秒作为删除时间，在DOM上我们在不同的时间添加了4个元素，那么第一个元素将在3秒后删除，依此类推，但这取决于它们添加的时间

var timer;

function alertBox3(msg, time){
    
    var numItems = $('div.alert').length + 1;
    
    var alertBox = '<div role="alert" class="elem_' + numItems +' alert alert-dismissible fade show g-bg-yellow rounded-5"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="h5"><i class="fa fa-exclamation-triangle"></i> Avviso</h4><p id="msg-alert" class="g-ma-0">' + msg + '</p></div>';
    
    $('#container-msg').append(alertBox);
    
    timer = setTimeout(function(){
        $('div.elem_' + numItems).remove();
    }, time);
    
}

var定时器；
函数alertBox3（消息，时间）{
var numItems=$（'div.alert'）。长度+1；
var-alertBox='×Avviso
'+msg+”
'；
$（“#容器消息”）.append（alertBox）；
计时器=设置超时（函数（）{
$（'div.elem_'+numItems）.remove（）；
}，时间）；
}

这样就可以了，但是所有元素都被一起删除了，我找不到一种方法使它们独立起来

ID是个不好的主意

类选择器方法1
您的代码很好，请使用数字增量微调计时器
您正在设置

class=“elem_'+numItems+”

，这意味着您要执行以下操作

let x = 0;
let callback = function(){
  if($('div.elem_' + x).length > 0 )
  {  
    $('div.elem_' + x).remove();
    setTimeout(callback, time);
  }
}
setTimeout(callback, time);

由于if条件<代码>if（$（'div.elem_'+x）.length>0）移除所有元素后，计时器将停止

如果第一个元素编号不是零，则根据第一个元素编号更改

让x=0；

JQuery DOM

eq

方法2
还有另一种方法可以使用此处指定的

eq

方法编写代码

只有最后添加的alement才会删除

或者您使用修改后的

.eq（1）

选择第一个元素

var timer;

function alertBox2(msg, time){
        
    let numItems = $('div.alert').length + 1;
    
    let alertBox = '<div role="alert" class="elem_' + numItems +' alert alert-dismissible fade show g-bg-yellow rounded-5"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="h5"><i class="fa fa-exclamation-triangle"></i> Avviso</h4><p id="msg-alert" class="g-ma-0">' + msg + '</p></div>';
    
    $('#container-msg').append(alertBox);
    
    let callback = function(){
    if($('.elem_' + numItems).length > 0 )
    {  
        $('.elem_' + numItems).remove();
        setTimeout(callback, time);
    }
    };
    setTimeout(callback, time);
    
}

var定时器；
函数alertBox2（消息，时间）{
设numItems=$（'div.alert'）.length+1；
设alertBox='×Avviso
“+msg+”
”；
$（“#容器消息”）.append（alertBox）；
让callback=function（）{
如果（$（'.elem_'+numItems）.length>0）
{  
$（'.elem_'+numItems）.remove（）；
setTimeout（回调，时间）；
}
};
setTimeout（回调，时间）；
}

---

第一次追加的numItems等于零，然后根据挂起项目的数量递增

id必须是唯一的“但元素都一起删除”-因为这是通过使用该选择器选择所有“alert”（代码>$（'div.alert'）告诉jQuery要做的事情。查看一下

alertBox

的内容，并尝试找到一些“独特的”“。我有一个唯一的类，即使我这样放置id：我无法让它工作，因为我做了更改OK，我很愚蠢，我忘记了类名前的句点，一个问题，为什么在回调中调用setTimeout？调用clearInterval不是更好吗？在内部调用setTimeout意味着它会循环，如果你不调用它，那么它只会运行一次，setInterval是一个不同的函数，它会永远运行下去

var timer;

function alertBox2(msg, time){
        
    let numItems = $('div.alert').length + 1;
    
    let alertBox = '<div role="alert" class="elem_' + numItems +' alert alert-dismissible fade show g-bg-yellow rounded-5"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="h5"><i class="fa fa-exclamation-triangle"></i> Avviso</h4><p id="msg-alert" class="g-ma-0">' + msg + '</p></div>';
    
    $('#container-msg').append(alertBox);
    
    let callback = function(){
    if($('.elem_' + numItems).length > 0 )
    {  
        $('.elem_' + numItems).remove();
        setTimeout(callback, time);
    }
    };
    setTimeout(callback, time);
    
}