Как удалить динамически добавленный элемент через 5 секунд?

Question

Я делаю простую игру, где пользователи должны щелкнуть мухи, чтобы удалить их с экрана. Пользователь не должен нажимать на кошку, когда она падает, и я надеюсь, что исчезнуть cat gif (удалить себя из DOM) через 5 секунд.

Приносим извинения, если раньше был дан ответ. Мне трудно решить это, так как мой опыт очень ограничен. Это мой первый вопрос/сообщение. Спасибо за любую обратную связь :)!

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

^это код, который я пытался писать ... .square класса являются квадратами, которые составляют таблицу, как сетка дивы ... и класс .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(); 
     }); 
    } 
}); 

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){... части.