如何在 5 秒后删除动态添加的元素？

Question

我正在制作一个简单的游戏，用户应该点击苍蝇将它们从屏幕上移除。用户不应该在它掉落时点击它，我希望让猫 gif 在 5 秒后消失（从 DOM 中移除）。

如果之前有人回答过这个问题，我深表歉意。由于我的经验非常有限，我很难解决这个问题。这是我第一次 question/post。感谢您的所有反馈:)！

$('.square').each(function(i){
    if (($('.square').eq(i)).has(".cat")){
        setTimeout(function(){
            $('.square').eq(i).find('img').remove();
    }, 5000);       
};

^这是我尝试编写的代码....square class 是构成 table 的正方形，就像 div 的网格...和 .cat class 指的是丢弃的图像。

问题是多只猫可以同时掉落在屏幕上。

我需要页面识别猫何时掉落，设置超时 5 秒，然后在 5 秒后从页面中删除该特定猫。

感谢您的帮助:)！

var randomize = function (x) {return Math.floor(Math.random()*x)};

var startFunk = function(){
    setTimeout(function(){
        $('.square:empty')[randomize(($('.square:empty').length))].innerHTML = dropArray[randomize(dropArray.length)];
        startFunk();
    }, 500);
};

Answer 1

可能有帮助

$('.square').each(function(i){
    if ($(this).find('.cat').length > 0){
        $(this).find('.cat').delay(5000).fadeOut(0, function(){
            // change ..^... with img 
            $(this).remove();
        });
    }
});

DEMO Here

Answer 2

var startFunk = function () {
    setTimeout(function () {
        var sqr = $('.square:empty')[randomize(($('.square:empty').length))];
        sqr.innerHTML = dropArray[randomize(dropArray.length)];
        sqr.has('.cat').delay(5000).empty();
        startFunk();
    }, 500);
};

并删除 $('.square').each(function(i){... 部分。

如何在 5 秒后删除动态添加的元素？

How do I remove a dynamically added element after 5 seconds?

javascript

each

jquery

settimeout