Question

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
        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;
    });
});

Answer 1

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).