时间戳

首页 > 解决方案 > 如何删除具有相同名称但在不同时间的新 div

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

问题描述

我有一个 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); 
}

标签： javascriptjquery

解决方案

记住您要添加的 div，然后删除该 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>

推荐阅读