创建后自动删除元素（Javascript / Jquery）[关闭]答案

【问题标题】：Auto-Remove element after being created (Javascript/Jquery) [closed]创建后自动删除元素（Javascript / Jquery）[关闭]
【发布时间】：2021-02-18 17:17:09
【问题描述】：

我一直在用 JavaScript 开发一些函数来在屏幕上显示消息。我的功能是这样的：

showMsg()：创建一个元素并将其附加到另一个元素中。

我想要做的是，鉴于该功能是通过 click 激活的，将计时器附加到 this 非常元素并在 3 秒后将其删除。

我尝试了很多方法来完成它，使用 setTimeouts 并使用 bind.('DOMSubtreeModified') 之类的侦听器在容器中删除容器中的元素，其中 showMsg() 元素被附加到。

我需要给创建的元素一个 X 计时器，并在 X 计时器结束后删除该元素。就像一个粘性炸弹，附着在元素上

你们能帮帮我吗？

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

为什么需要将它设置为特定的对象？如果您希望项目在设定的时间后被销毁，您可以简单地通过保存对象对变量的引用然后在 setTimeout 中使用 .remove() 将其销毁。

setTimeout 的实例不会被销毁，因此它的行为就像在大多数用例中将其连接到对象一样。

例如：这是我所写的内容，适用于我认为您想要的内容。

function spawnTemp() {
  var deleteMe = $("<div style='height: 100px; width: 100px; background: lime;'>My Message</div>").appendTo("#eleContainer");
  setTimeout(function() {
    deleteMe.remove();
  }, 1000);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

  <button id="spawnElement" onclick="spawnTemp();">Spawn Temporary</button>
  <div id="eleContainer">
  </div>

</body>

</html>

注意：在这段代码中，我使用appendTo() 方法来获取附加对象的实例，这允许我通过存储在变量deleteMe 中的引用删除该实例。

如果您使用的是append()，那么存储的变量将引用作为附加对象父级的容器。

如果您绝对需要将计时器附加到元素上，那么您可以使用更复杂的，

$("new html").appendTo('container').delay(2000).queue(function() { $(this).remove(); });

不过，很难想象为什么你会使用它而不是替代 setTimeout()。

【讨论】：

【解决方案2】：

谢谢你们，特别是 Liam，他给了我我需要的正确方法。

它终于成功了，但方式有点不同。

调用函数 showMsg 并将其存储到变量中不允许我使计时器工作，它会创建元素，但不会删除它。

我最后做的是创建一个变量并粘贴函数showMsg()的“result”，然后计时器就可以工作了。结果是这样的：

当下的答案

var elem = $("<div>You must be logged first my friend</div>").appendTo('.notification-bar');
    setTimeout( function() {
        $(elem).remove();
    }, 3000);

现在一切正常。

我遇到的问题，已解释

这是我应该做的：

我得到的功能：

createElement：使用给定的属性、数据和位置创建元素

function createElement(element, attributes, position, text) {
var object = $(document.createElement(element)); // Element creation
$.each(attributes, function(key, value) { // Array of attributes
    object.attr(key, value); // Attr: Value
});
$(object).appendTo(position); // Place
$(object).append(text); // Text

}

showMsg()：使用createElement来创建和放置一个div

function showMsg() {
createElement('div', null, '.notification-bar', "You must be logged first my friend");

}

onclick 触发器：在身体负荷时调用。 * 这应该可以工作 *

$('.reply-button').click(function(event) {
    var elem = notifyUser('You must be logged first my friend');
    setTimeout( function() {
        $(elem).remove();
    }, 3000);

});

如果有人知道如何执行之前的问题，请现在告诉我

提前谢谢你；）

【讨论】：