JSFiddle - React, Tailwind, and code Playground

by markrummel

HTML

<table>
    <tr id="one" data-id="one" data-rank="1">
        <td class="name">Item One</td>
        <td>
            <button class="delete" >Delete</button>
        </td>
    </tr>
    <tr id="two" data-id="two" data-rank="2">
        <td class="name">Item Two</td>
        <td>
            <button class="delete" >Delete</button>
        </td>
    </tr>
    <tr id="three" data-id="three" data-rank="3">
        <td class="name">Item Three</td>
        <td>
            <button class="delete" >Delete</button>
        </td>
    </tr>
    <tr id="four" data-id="four" data-rank="4">
        <td class="name">Item Four</td>
        <td>
            <button class="delete" >Delete</button>
        </td>
    </tr>
</table>

JavaScript

$('button.delete').click(function() {
    $original = $(this).closest("tr");
    $next = $original.next();
    $(this).closest('tr').remove();
    while ($next.length) {
        newRank = parseInt($next.attr('data-rank')) - 1;
        alert(newRank);
        $next.attr('data-rank',newRank);
        $next = $next.next();  
    }
});

$('td.name').click(function() {
    rank = $(this).closest('tr').attr('data-rank');
    alert(rank);
});