Javascript 如何使用jQuery删除表中的特定行？

我有一张如下表：

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>

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

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

CSS：

<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>

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

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

---

我只想在用户单击特定行的“x”时触发删除事件，而不是整行或行的任何部分。我想我可能只是错过了正确的选择器，但我不确定

您可以使用

this

来引用处理程序所针对的元素

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

---

同样从我看到的情况来看，当您单击delete按钮时，您需要删除该行，因此您需要将处理程序添加到delete元素，然后使用查找存在delete按钮的

tr

元素，然后调用删除该行

我正在查看您的问题，我有一个解决方案：

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

您需要删除表id上的hashtag（应该只是“数据过滤器”），这是您从jQuery中调用它的方式，而不是在HTML中声明它的方式

我对函数所做的是将侦听器设置在范围内而不是行上，并调用父节点，直到TR

---

希望对您有用。

id=“#数据过滤器”

谢谢。删除它…这是一个打字错误。