通过单击删除DOM元素[重复]答案

【问题标题】：removing DOM element by clicking on it [duplicate]通过单击删除DOM元素[重复]
【发布时间】：2017-12-19 22:17:48
【问题描述】：

我有一个名为“BTN”的全局 javascript 变量：

var BTN;

当用户执行某些操作时，会调用一个函数，该函数将 DOM-Button-element 分配给该变量（通过以下代码）：

BTN = document.createElement("BUTTON");
var text = document.createTextNode("click to remove me again");
BTN.appendChild(text);

当用户点击按钮时，按钮应该消失。为此，我创建了以下 Event-Listener：

$(BTN).on("click", function(){
    $(this).remove();
});

但是，当我点击按钮时，什么也没有发生。

我不明白出了什么问题。最可笑的是：点击按钮并不是用户摆脱它的唯一方法。当他点击某个区域时，会调用一个函数（除其他外）删除按钮，只需通过以下代码行：

if(BTN) $(BTN).remove();

这就像一个魅力。但是另一种方法（用户单击按钮）不起作用。我不知道这是怎么回事！

【问题讨论】：

【解决方案1】：

由于您的按钮是动态添加的，因此您无法直接将事件绑定到它，因为它还不存在。试试 jQuery 文档中的这个例子来绑定到 body 而不是你的按钮。

$( "body" ).on( "click", "ID of your button", function() {
    console.log( $( this ).text() );
});

【讨论】：

【解决方案2】：

两个建议：

如果这不起作用，您可以尝试添加延迟：

$(BTN).on("click", function() {
    setTimeout($(this).remove, 10); // wait 10ms to remove this element
});

【讨论】：