5秒后如何刪除動態添加的元素？

Question

我正在制作一個簡單的游戲，用戶應單擊蒼蠅將其從屏幕上刪除。 用戶放下貓時不應點擊它，我希望5秒鍾后貓gif消失（從DOM中刪除）。

如果這已經得到回答，我深表歉意。 由於我的經驗非常有限，我很難解決這個問題。 這是我的第一個問題/帖子。 感謝您的任何反饋：）！

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

^這是我嘗試編寫的代碼... .square類是組成表格的正方形，如divs網格... .cat類是指丟棄的圖像。

問題是可以同時將多只貓放在屏幕上。

我需要頁面來識別何時將貓掉下，將其設置為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();
        });
    }
});

在這里演示

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){...部分。