5秒后删除新的div

Question

我想添加一个div元素，然后在5秒钟后将其删除。 我尝试过了。

$("#mainContentTD").prepend("<div style='color: #038a00; padding-bottom:10px;'>Your detailes where sucsesfuly... </div>").delay(5000).remove("this:first-child");

- eyalb

Answer 1

您可以像这样使用setTimeout：

setTimeout(function(){
  $('#divID').remove();
}, 5000);

5000 (ms) 表示5秒。您应该将 divID 替换为您自己的 div/element id。

您可以使用 length 来确保该 div 存在：

setTimeout(function(){
  if ($('#divID').length > 0) {
    $('#divID').remove();
  }
}, 5000)

- Sarfraz

---

值得注意的是，检查div是否存在是完全不必要的，因为当在空的jQuery集合上调用$.fn.remove()时，jQuery不会出错。 - tbranyen

Answer 2

.delay()方法只适用于使用标准效果队列或自定义队列的方法。

.delay()方法最适合用于延迟排队的jQuery效果。因为其功能有限 - 例如，它没有提供取消延迟的方法 - .delay()不能替代JavaScript的本地setTimeout函数，在某些情况下，后者可能更适合。

也就是说，您可以使用setTimeout()：(演示)

var $elm = $("<div style='color: #038a00; padding-bottom:10px;'>Your detailes where sucsesfuly... </div>");
$("#mainContentTD").prepend($elm);
setTimeout(function() {
    $elm.remove();
}, 5000);

或者，您可以使用一个effect方法来删除元素: (演示)

$("#mainContentTD")
    .prepend("<div style='color: #038a00; padding-bottom:10px;'>Your detailes where sucsesfuly... </div>")
    .children(':first')
    .delay(5000)
    .fadeOut(100);

- jensgram

---

嗯，也许我在发布之前应该更新一下 :) 不过，第一部分 可能 有用。 - jensgram

Answer 3

你可以尝试这段代码，在我的情况下它运行得很好。

setTimeout(function () {
    document.getElementById('not-valide').style.display = 'none'
    document.getElementById('valide').style.display = 'none'
}, 5000)

- Md Afsar Uddin