當我點擊<a>

Question

時，如何使用jQuery/JS使輸入行（）消失這讓我很尷尬，我甚至不知道從哪裏開始。

我有許多像這樣的表格行。我如何創建一些jQuery來允許點擊x，從而將輸入行從DOM中刪除。

我當然可以將一些標記硬編碼到代碼中，並使其適用於這種特定情況，但是我希望它可以處理任意數量的相似行。這是我目前腦力衰弱的地方。

<tr><td>Well Name - <span class="urlOfProperty">http://mycompany.com/type/well-name</span> 
    <div class="close">[<a href="#">x</a>]</div></td> 
</tr> 

Answer 1

你可以在jQuery中使用.closest方法：

$(".close a").on("click", function(e) { 
    $(this).closest("tr").remove(); 
    e.preventDefault(); 
}); 

（或使用委託，可能更適合您的具體任務）：

$("table").on("click", ".close a", function(e) { 
    $(this).closest("tr").remove(); 
    e.preventDefault(); 
}); 

代碼示例是jQuery 1.7+

如果您使用的版本較低，您可以使用：

$("table").delegate(".close a", "click", function(e) { 
    $(this).closest("tr").remove(); 
    e.preventDefault(); 
}); 

有點警告，這會綁定文檔中所有表格上的事件，也可能將表格選擇器更改爲更獨特。

Answer 2

你的桌子上添加一個 「MY_TABLE」 標識和使用：

$(function(){ 
    $("#my_table").on('click','.close',function(event){ 
     event.preventDefault(); 
     $(this).closest('tr').remove(); 
    }); 
});