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上的＃标签（应该只是“数据过滤器”），这就是你如何从jQuery调用它而不是如何在HTML上声明它

我正在对函数做什么，它在行中设置监听器而不是在行上调用父节点直到TR

希望对你有用。

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

2 个答案: