通过点击删除DOM元素

Question

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

var BTN; 

当用户执行某些事情的函数被调用其中一个DOM-按钮元素分配给这个变量（通过以下代码）：

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

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

Answer 1

由于您的按钮被动态地添加你无法将事件绑定到它，因为它不存在。试试从jQuery文档中的这个例子来绑定到身体，而不是你的按钮。

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

Answer 2

两个建议：

1. 我不认为你需要重新包装在一个jQuery对象......我认为this.remove();（无$(this)）可能工作的工作？

2. 如果不工作，你可以尝试添加延迟：直接

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