Delete a header row after all the other rows have been deleted

I have a table that looks something like this:

<table>
<tr id="header">
    <th>Title</th>
    <th>Title</th>
</tr>
<tr id="1" class="record">
    <td><a class="delbutton">X</a></td>
    <td>Some Data</td>
</tr>
<tr id="2" class="record">
    <td><a class="delbutton">X</a></td>
    <td>Some Data</td>
</tr>
</table>

And I have a jQuery script:

$(function() {
    $(".delbutton").click(function(){

        //Save the link in a variable called element
        var element = $(this);

        //Find the id of the link that was clicked
        var del_id = element.attr("id");

        //Built a url to send
        var info = 'del_id=' + del_id;
        if(confirm("Are you sure you want to delete this entry?  This cannot be undone.")) {
            $.ajax({
                type: "GET",
                    url: "delete_entry.php",
                    data: info,
                    success: function(){
            }
        });

        $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
        .animate({ opacity: "hide" }, "slow");
    }
    return false;
    });
});

What I'm trying to do is to delete the header row (id="header"), or better yet, the remaining table after the last data row has been deleted.

Any guidance would be great

Update: After following Tom's recommendation I tried to count the rows. I tried with:

$('.record').size()

but that always reports the initial number of rows - it never accurately reports the row count after I delete a row. Is it possible to keep track of just the remaining rows somehow?

Resolution This worked:

$(function() {
    $(".delbutton").click(function(){

        //Save the link in a variable called element
        var element = $(this);

        //Find the id of the link that was clicked
       开发者_StackOverflow社区 var del_id = element.attr("id");

        //Built a url to send
        var info = 'del_id=' + del_id;
        if(confirm("Are you sure you want to delete this entry?  This cannot be undone.")) {
            $.ajax({
                type: "GET",
                    url: "delete_entry.php",
                    data: info,
                    success: function(){
            }
        });

        $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
        .animate({ opacity: "hide" }, "slow");
                    //Remove - don't just hide                        
                    $(this).parents(".record").remove();

                    //If there are no more deleteable rows, delete the header
        if($('.record').length == 0) {
            $('#existTitle').animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow");
        }
    }
    return false;
    });
});

You might want to put the animation for hiding the row in the conditional

if(confirm("Are you sure you want to delete this entry?  This cannot be undone.")) {
  $.ajax({
    type: "GET",
    url: "delete_entry.php",
    data: info,
    success: function() {
      // change this animation to whatever you want
      $(this).parent().animate({ opacity: "hide" }, "slow");
    }
}

This way, the row only disappears if the person confirms they want to delete. Then, along with that animation, do another check to see if there are any rows left (using children or siblings and .size() ) If not hide the header row using the same code (with the animation of your choice):

  $("#header").animate({ opacity: "hide" }, "slow");

(see comments on question first) Alternative to removal - use the addClass/removeClass - then count those rows with/without the class - compare against the total to see how many rows are visible.

$(this).parents(".record").addClass("removedrow");
var removedRowsCount = $('#myTable tr.removedrow').length;

for completeness:

$(this).parents(".record").addClass("removedrow").animate({ backgroundColor: "#fbc7c7" }, "fast") 
        .animate({ opacity: "hide" }, "slow"); 
var removedRowsCount = $('#myTable tr.removedrow').length;
if (removedRowsCount < ($('#myTable tr').length -1))
{
   $(this).parents(".header").addClass("removedrow").animate({
        backgroundColor: "#fbc7c7" }, "fast") 
        .animate({ opacity: "hide" }, "slow"); 
};

Grab the table, I'm assuming you can get it with $(this).parents(".record").parents("table"), check the number of child rows it has and if it's 1 or 0, remove the element (or fade it out).