创建后自动删除元素Javascript / Jquery

如何解决创建后自动删除元素Javascript / Jquery

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

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

我想做的是，假设该功能是通过点击激活的，请在 this 元素中添加一个计时器，并在3秒后将其删除。

我尝试了多种方法来实现setTimeouts并通过容器中的 bind。（'DOMSubtreeModified'）这样的侦听器删除容器中的元素，其中容器 showMsg（） >元素将被附加到。

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

你们能帮我吗？

谢谢

解决方法

为什么需要将其设置为特定的对象？如果您希望物品在设定的时间后被销毁，只需保存对象对变量的引用，然后在.remove()内用setTimeout销毁它即可。

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()上使用它。

谢谢你们，特别是利亚姆（Liam）为我提供了我所需要的正确方法。

最终解决了，但方式有所不同。

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

我最后要做的是创建一个变量，并粘贴函数showMsg（）的“ 结果”，然后计时器开始工作。最终像这样：

当下的答案

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);

});

如果有人对如何解决之前遇到的问题有所了解，请立即让我来

提前谢谢;）

创建后自动删除元素Javascript / Jquery

如何解决创建后自动删除元素Javascript / Jquery

解决方法

相关推荐