How to remove all rows of the table but keep the header

I want to remove all rows of my table except the header.

This is what I’ve tried but it always deletes all rows and header:

$("#<%=tblDetailFourn.ClientID%> tbody tr").remove();

$("#<%=tblDetailFourn.ClientID%> tbody tr").not("thead tr").remove();

$("#<%=tblDetailFourn.ClientID%> tr").not("thead tr").remove();

$("#<%=tblDetailFourn.ClientID%> tbody").not("thead").remove();

$("#<%=tblDetailFourn.ClientID%> tbody").remove();

$("#<%=tblDetailFourn.ClientID%> > tbody").remove();

Here’s the html:

<table id="tblDetailFourn" runat="server" class="ProjetTable ProjetTableHover">
    <thead>
       <tr>
          <th style="width:200px">Rôle de Ressource</th>
          <th style="width:200px">Nom Prénom</th>
          <th style="width:120px">Tel</th>
          <th style="width:200px">Courriel</th>
          <th style="width:80px">Actif</th>
          <th style="width:33px"></th>
          <th style="width:33px"></th>
      </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

$('#tblDetailFourn tbody').empty();

Method 2

Try using this:

$('#<%=tblDetailFourn.ClientID%> tr').not(function(){ return !!$(this).has('th').length; }).remove();

Method 3

Try http://api.jquery.com/child-selector/

$("#<%=tblDetailFourn.ClientID%> > tbody > tr").remove();

What you have should work though.

Method 4

What about:

$('#tblDetailFourn tbody').html('');

jsfiddle

Method 5

This should work, assuming that you don’t have any header elements in tbody.

$("#<%=tblDetailFourn.ClientID%> tbody tr").remove();

Method 6

Have you tried this?:

$("#<%=tblDetailFourn.ClientID%> tbody").html('')

Method 7

Based on the html you provided the solution is following

$("#tblDetailFourn tbody").empty();

This will work perfectly.

Thanks

Method 8

$('#tblDetailFourn > tbody > tr > td').parent('tr').empty();

Method 9

if you want to delete all the tbody including the tag then use

$("#tblDetailFourn tbody").remove();

it will remove all the tr under the tbody as well as tbody.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0