如何使用jQuery刪除表格的特定行？

Question

我有類似下面的表格：

HTML：

<table id="data-filter"> 
    <tr> 
    <td>1</td> 
    <td>Harry Potter</td> 
    <td><span class="delete"></span></td> 
    </tr> 
    <tr> 
    <td>2</td> 
    <td>Frodo Baggins</td> 
    <td><span class="delete"></span></td> 
    </tr> 
</table> 

如果用戶點擊任意行 「X」，即特定的行會被刪除。我能夠找到哪個行被點擊，但我無法找到確切的哪個行「x」被點擊。我的jQuery和CSS代碼低於：

jQuery的：

$(document).on('click', '#data-filter tr', function() { 
    rn = this.rowIndex; 
    alert('You clicked row: '+rn); // do something to remove this row 
}); 

CSS：

.delete:after { content:"x";} 

我想要觸發刪除事件，只有當用戶點擊一個特定的行「x」，而不是整行或只是該行的任何部分。我想我可能只是錯過了正確的選擇，但我不確定。

Answer 1

您可以使用this指由處理器針對的元素，以便

$(document).on('click', '#data-filter tr .delete', function() { 
    $(this).closest('tr').remove() 
}); 

從我所看到的，你需要刪除的行，當你點擊刪除按鈕，所以你需要添加

還處理程序來刪除元素，然後用.closest()找到tr元素，其中刪除按鈕存在，則調用.remove()刪除該行

Answer 2

我是看着您的問題，我有一個解決辦法：

$(document).on('click', '#data-filter tr .delete', function() { 
      this.parentElement.parentElement.remove(); 
     }); 

而且你需要刪除你的表ID＃標籤（應該只是「數據過濾器」），這是你如何從jQuery的調用它不是如何宣佈HTML真實

我用在做什麼將其設置爲不在該行的範圍內的監聽器，並調用父節點，直到TR爲止。