Question

I have the following HTML structure, (This cannot change).

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

I would like to remove, (via jQuery/Javascript), <div> Comment 2 & all its “reply” divs (It does not have a parent child relationship, Each div is by itself, so I cannot use .children to traverse the DOM).

But <div> Comment 3 should remain, as should <div> Comment 1.

So basically, I want to remove comment 2 and all of its .reply (which are not children, They are individual divs).

I was thinking of using something like .next() with a if() & .hasClass() to see if we are at the end of the comment section we want to delete, but was having trouble with this.

Answer 1

JQuery makes it pretty easy with the .nextUntil() method. Documentation here.

The example is included in this JSFiddle.

The code is the following one:

// 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();
});

​