在计时器之后仅删除使用jQuery创建的最旧的元素

Question

每当单击一个按钮时，我都会飞过一只船，尽管此刻它会删除屏幕上的所有船，而不是创建的最旧的船。

(function (el) {
  setTimeout(function () {
    el.children().remove('.ship');
  }, 5000);
}($('#saleShipHolder').append("<div class='ship' id='saleShip'></div>")));

它创建了船，附加了船元素，但是当船被移走时会出现问题，因为它将屏幕上的所有船都移走了，而不是最旧的船。 对不起，我觉得这很难解释。

先感谢您。

Answer 1

对于初学者来说，每个“船”都有相同的ID，不应该具有相同的ID。 另外，由于它们都具有相同的类，因此将查找所有它们。

一种简单的方法是将最新的ship元素splice到数组上，并在超时时将.pop()从最旧的条目中删除，并将其删除。

Answer 2

为什么不封装船呢？

(function (el) {
    var ship = $("<div class='ship' id='saleShip'></div>");

    el.append(ship);

    setTimeout(function () {
      ship.remove();
    }, 5000);

}($('#saleShipHolder')));