Question

I have an html table. Here is a simplified version:

<table>
      <tr>
           <td><div style="display: none;" class="remove0">Remove Me</div></td>
      </tr>
      <tr>
           <td><div style="display: none;" class="remove1">Remove Me</div></td>
      </tr>
      <tr>
           <td><div class="remove2">Remove Me</div></td>
      </tr>
</table>

I have a Javascript that clicks on Remove Me in the last row and it deletes the html row using:

$(this).parents("tr:first").remove();

The issue is that when I remove this last row, I also want the “Remove Me” text to now show up on the second row (which is now the new last row). How would I show this div so that it would dynamically show the “remove me” from the new last row?

Answer 1

Try this. Give all the divs the same class – it’ll be much simpler in the long run.

<table>
  <tr>
       <td><div class="remove">Remove Me</div></td>
  </tr>
  <tr>
       <td><div class="remove">Remove Me</div></td>
  </tr>
  <tr>
       <td><div class="remove">Remove Me</div></td>
  </tr>
</table>

And this javascript:

$('.remove')
    .click(function() {
        var $tr = $(this).closest('tr');
        $tr
            .prev()
            .find('.remove')
            .show()
        ;
        $tr.remove();
    })
    // hide all but the last one
    .slice(0, -1).hide()
;