jquery - JQuery - 添加 DOM 元素然后删除它

Question

我需要在父 div 中添加一个子 div，然后在 x 秒内删除子 div。

可能有几个子 div 添加到父 div。

识别和删除子 div 的最佳方法是什么？

$("#parent_div").prepend("<div>"+msg+"</div>");

谢谢。

Answer 1

通过保留对它的引用：

function doTheChildDivThing() {
    var child = $("<div>" + msg + "</div>");
    $("#parent").prepend(child);
    setTimeout(function() {
        child.remove();
    }, 1000);
}

---

在下面回复您的评论：

为什么延迟（）（而不是 setTimeout）在这种情况下不起作用？

delay与效果队列一起使用。remove不是与效果相关的方法。不过，您当然可以使用delay其中一种效果方法，例如slideUp. 然后，您将在效果方法的完成回调中删除子项，如下所示：

function doTheChildDivThing() {
    var child = $("<div>" + msg + "</div>");
    $("#parent").prepend(child);
    child.delay(1000).slideUp(function() {
        child.remove();
    });
}

Answer 2

试试这个方法：

$("<div/>", {

  // PROPERTIES HERE

  text: "Click me",

  id: "example",

  "class": "myDiv",      // ('class' is still better in quotes)

  css: {           
     color: "red",
     fontSize: "3em",
     cursor: "pointer"
  },

  on: {
    mouseenter: function() {
      console.log("PLEASE... "+ $(this).text());
    },
    click: function() {
      console.log("Hy! My ID is: "+ this.id);
    }
  },

  append: "<i>!!</i>",

  appendTo: "body"      // Finally, append to any selector

}); 

// And remove 

setTimeout(() => {
    $('.myDiv').remove();
}, 1000)