我有一个类似这样的结构:
<div class="list_wrapper">
<div class="row mainrow">
Main Row
<a href="javascript:void(0);" class="list_remove_button">Remove</a>
</div>
<div class="row subrow">
Sub Row
</div>
<div class="row subrow">
Sub Row
</div>
<div class="row mainrow">
Main Row
<a href="javascript:void(0);" class="list_remove_button">Remove</a>
</div>
<div class="row subrow">
Sub Row
</div>
</div>
这里，在mainrow之后，可以插入subrow它不是强制的。 现在，如果我删除mainrow，那么它后面的子行也应该删除，因为我正在尝试此代码，但它不工作，单击时为list_remove_button的当前元素将删除最近的mainrow，但不删除(mainrow的兄弟子行):
$('.list_wrapper').on('click', '.list_remove_button', function()
{
$(this).closest('div.row').remove();
$(this).children('.subrow').remove();
});
.closex().mainrow之后
.nextuntil()获取下一个兄弟姐妹.addback()将初始的$main添加回堆栈-在.remove()之前将它们全部添加到null
$('.list_wrapper').on('click', '.list_remove_button', function() {
const $main = $(this).closest('.mainrow');
$main.nextUntil('.mainrow').addBack().remove();
});<div class="list_wrapper">
<div class="row mainrow">
Main Row 1
<a href="javascript:void(0);" class="list_remove_button">Remove</a>
</div>
<div class="row subrow">
Sub Row 1
</div>
<div class="row subrow">
Sub Row 1
</div>
<div class="row mainrow">
Main Row 2
<a href="javascript:void(0);" class="list_remove_button">Remove</a>
</div>
<div class="row subrow">
Sub Row 2
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>