我如何使用jQuery删除仅基于TD类的表行子集?

Question

如果我有一个像这样的简单表格:

<table>
<tr class ="tableRow"><td>Teacher #1</td></tr>
<tr><td class="detail">Susan</td></tr>
<tr><td class="detail">AM</td></tr>
<tr class="tableRow"><td>Teacher #2</td></tr>
<tr><td class="detail">Tom</td></tr>
<tr><td class="detail">PM</td></tr>
</table>

我的代码删除了包含带有"detail":

类的TD的所有表行。

$('tr td.detail').each(function(){
$(this).parent().remove(); }

但是，我只希望当我单击包含她的名字而不是Tom的名字的行时，它删除Susan下的详细td。反之亦然。而不是将它们全部删除。

我已经在一个函数运行时，一个表行被点击:$(".tableRow").on('click',function(){ ... });，所以我想有一种方法可以检查，比如说，接下来的两行表，看看是否有任何详细的td。

有办法吗?

Answer 1

使用.nextUntil()匹配.tableRow之前的所有行。

$(".detail").click(function() {
$(this).parent().nextUntil(".tableRow").remove();
$(this).parent().remove();
});