JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/12959477/jquery-remove-rows-based-on-class

by RASG

HTML

<table>
<tr class="itemRow">
    <td>Item 1</td>
    <td><a class="delete" href="#">Delete</a></td>
</tr>
<tr class="optionRow">
    <td>Option 1</td>
    <td><a class="delete" href="#">Delete</a></td>
</tr>
<tr class="optionRow">
    <td>Option 2</td>
    <td><a class="delete" href="#">Delete</a></td>
</tr>
<tr class="optionRow">
    <td>Option 3</td>
    <td><a class="delete" href="#">Delete</a></td>
</tr>
<tr class="commentRow">
    <td colspan="2">Comment</td>
</tr>
<tr class="itemRow">
    <td>Item 2</td>
    <td><a class="delete" href="#">Delete</a></td>
</tr>
<tr class="optionRow">
    <td>Option 1</td>
    <td><a class="delete" href="#">Delete</a></td>
</tr>
<tr class="commentRow">
    <td colspan="2">Comment</td>
</tr>
<tr class="itemRow">
    <td>Item 3</td>
    <td><a class="delete" href="#">Delete</a></td>
</tr>
<tr class="optionRow">
    <td>Option 1</td>
    <td><a class="delete" href="#">Delete</a></td>
</tr>
<tr class="commentRow">
    <td colspan="2">Comment</td>
</tr>
</table>

CSS

table {
    width: 50%;
}

table td {
    padding: 4px 0;            
}

td < a {
    text-align: right;
}

JavaScript

$('body').on('click', '.delete', function() {
    var $tr = $(this).closest('tr');
    if ($tr.attr('class') == 'itemRow') {
        $tr.nextUntil('tr[class=itemRow]').andSelf().remove();
    }
    else {
        $tr.remove();
    }
});