Remove last table row

jQuery – Remove last row from table

Posted on: June 10th, 2013 by taff No Comments

 

Learning how to remove last row from table with javascript is functionality I occasionally implement when the last row contains totals for each column and I need to load more rows of data via ajax. I will delete the last table row then append data then call my total generator function.

If using jQuery I simply use the following to delete the last row from a table:

$('#idOfTable tr:last').remove();

Of late, whenever I use a table to display data I take advantage of the tablesorter plugin as it offers everything I need straight out of the box. The markup required by tablesorter for a table looks like this

<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>

As you can see I use the thead, tbody and tfoot tags. I think these are a good choice anyway so tablesorters requirement makes no difference to me at all.

Remove tfoot with jQuery

If I need to remove the entire tfoot before adding the new table rows it is even easier than the above script to remove a row. I can simply do

$('#idOfTable tbody').remove();

And it's bye bye tfoot.