通过单击删除DOM元素

Question

我有一个名为＆＃34; BTN＆＃34;的全局javascript变量：

var BTN;

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

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