如何使用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()
});

同樣從我所看到的，你需要在單擊刪除按鈕時刪除該行，因此你需要將處理程序添加到delete元素，然后使用.closest（）來查找刪除按鈕所在的tr元素然后調用.remove（）刪除該行

Answer 2

我在看你的問題，我有一個解決方案：

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

你需要刪除你的表id（應該只是“數據過濾器”）上的hashtag，你如何從jQuery調用它而不是如何在HTML上聲明它

我正在用函數做什么，它在行中設置監聽器而不是在行上調用父節點直到TR

希望對你有用。