通過點擊刪除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 
   });