javascript - 删除具有某个类的所有元素，直到到达下一个元素

Question

我有以下 HTML 结构(这无法更改)。

<!-- Comment 1 -->
<div class="ac_feed_item comments_v2_list" style="padding-left: 0px;"></div> <!-- Main Div -->
<div class="ac_feed_item comments_v2_list reply" style="padding-left: 20px;"></div> <!-- Reply Div -->
<div class="ac_feed_item comments_v2_list reply" style="padding-left: 40px;"></div> <!-- Reply Div -->
<div class="ac_feed_item comments_v2_list reply" style="padding-left: 60px;"></div> <!-- Reply Div -->

<!-- Comment 2 -->
<div class="ac_feed_item comments_v2_list" style="padding-left: 0px;"></div> <!-- Main Div -->
<div class="ac_feed_item comments_v2_list reply" style="padding-left: 20px;"></div> <!-- Reply Div -->
<div class="ac_feed_item comments_v2_list reply" style="padding-left: 40px;"></div> <!-- Reply Div -->

<!-- Comment 3 -->
<div class="ac_feed_item comments_v2_list" style="padding-left: 0px;"></div> <!-- Main Div -->
<div class="ac_feed_item comments_v2_list reply" style="padding-left: 20px;"></div> <!-- Reply Div -->

我想删除(通过 jQuery/Javascript)<div> Comment 2 ＆它的所有“回复”div(它没有父子关系，每个div都是独立的，所以我无法使用.children来遍历DOM)。

但是<div> Comment 3应该保留，就像 <div> Comment 1 一样.

基本上，我想删除 comment 2及其所有 .reply (不是子元素，它们是单独的 div)。

我正在考虑使用类似 .next() 的东西与 if() & .hasClass()看看我们是否在我们想要删除的评论部分的末尾，但遇到了麻烦。

Answer 1

JQuery 使用 .nextUntil() 方法使这一切变得非常简单。 Documentation here.

该示例包含在此 JSFiddle 中.

代码如下:

// On click of a div which is not of class .reply
$('div.ac_feed_item.comments_v2_list:not(.reply)').click(function() {
    // Remove all divs after this, until a div that does not have `.reply` class
    $(this).nextUntil('div.ac_feed_item.comments_v2_list:not(.reply)').remove();
    // remove the main comment div
    $(this).remove();
});

​