Question

I am trying to empty all the rows inside the tbody on click of a new row. This is the javascript i am using:

$('#pro tr').click(function() {
    $('#pro_basket > tbody').empty();
        $.ajax({
            type: "post", url: "data.php", data: "index="+index,
            success: function(data) {
            $('#pro_basket > tbody').after(data);
        }
    });
});

My table markup is simple:

<table id='pro_basket'>
   <thead>
       <th>Column 1</th>
       <th>Column 2</th>
   </thead>
   <tbody>
   </tbody>
</table>

I want to empty the rows that exist in pro_basket but $('#pro_basket > tbody').empty(); isn’t really helping.

Answer 1

$('#pro_basket > tbody').html(data);

html() method will replace all exisitng elements in tbody

Your after() method would put new rows into table after the tbody which is not likely what you wanted