JSFiddle - React, Tailwind, and code Playground

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 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"commentRow">
    <td colspan="2">Comment</td>
</tr>
<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"commentRow">
    <td colspan="2">Comment</td>
</tr>
</table>

CSS

table {
    width: 50%;
}

table td {
    padding: 4px 0;            
}

td < a {
    text-align: right;
}

JavaScript

$(document).ready(function() {
    var $body = $('body');
    $body.on('click', '.delete', function() {
        var $tr = $(this).closest('tr');
        // Found the correct element
        console.log($tr);

        // No class is found?
        console.log($($tr).attr('class'));

        // If the delete is issued by the itemRow,
        // delete the option rows and comment row as well
        if ($tr.attr('class') == 'itemRow') {
            console.log('itemRow clicked');
            var $optionRows = $tr.find('tr.optionRow');
            console.log($optionRows);
            $optionRows.each(function() {
                $(this).remove();
            });
            $tr.closest('tr.commentRow').remove();
        }
        $tr.remove();
    });
});