Remove element if last

I don't know if this is even possible but we'll see...

I have a table:

<table cellspacing="0" class="stripey">
            <thead>
                <tr>
                    <td class="center"></td>
                    <td>Plan Name</td>
                    <td class="options">Options</td>
                </tr>
            </thead>
            <tbody>
                <?php 
                foreach ($result as $row) {
                ?>
                <tr class="<?php echo alternator('', 'odd'); ?>" id="record-<?php echo $row['id'];?>">
                    <td class="center"></td>
                    <td><?php echo $row['name']; ?></td>
                    <td class="options"><img src="<?php echo base_url();?>inc/images/search.png"> <img src="<?php echo base_url();?>inc/images/pencil.png"> <a href="#" class="delete" title="delete"><img src="<?php echo base_url();?>inc/images/delete.png"></a></td>
                </tr>
                <?php
                }
                ?>
            </tbody>
        </table>

as you can see, the <tr> is repeated for however many is in $result... but I have an image allowing me to delete the item... so I wrote:

$('a.delete').click(function() {
    var parent = $(this).parents("tr:first");
    $.ajax({
        type: 'get',
        url: '/plans/delete',
        data: 'id='开发者_如何转开发+ parent.attr('id').replace('record-', ''),
        beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},300);
        },
        success: function(msg) {
            parent.children('td').wrapInner('<div>');
            parent.children('td').children('div').slideUp(500,function() {
            parent.remove();
            $('.stripey tr').removeClass('odd');
            $('.stripey tr:even').addClass('odd');

            });
        }
    });
    return false;       
});

Now what I would like to know, is if it's possible to somehow tell how many tr items there are in the tbody so that if there is 0, I can replace the entire table with text stating there are none.

You can use the length property of the jQuery dom object...

if($('table.stripey tbody tr').length == 0) {
    // do something
}

You could check the length of the children of the tbody:

if($("tbody").children().length) {
    console.log("There is still at least one row.");
}else{
    console.log("There are no more rows.");
}

You can use the below line to get the total no of trs in the anchor click event handler.

var totalNoOfTrs =  $(this).closest("tbody").children().length;

$('a.delete').click(function() {
    var parent = $(this).parents("tr:first");
    var $tr = $(this).closest("tr");
    $.ajax({
        type: 'post',
        url: '/plans/delete',
        data: 'id='+ parent.attr('id').replace('record-', ''),
        beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},300);
        },
        success: function(msg) {
            var $tbody = $tr.closest("tbody");
            $tr.remove();
            if($tbody.children().length > 0){
               $('.stripey tr').removeClass('odd');
               $('.stripey tr:even').addClass('odd');
            }
            else{
               //Replace the table with appropriate message.
               $('.stripey').replaceWith("<div>No rows to delete</div>");
            }

        }
    });
    return false;       
});

In the above code this points to the anchor element with class delete and closest of tbody will give the tbody element which contains all the trs and then children() of tbody will give all the tr elements within it.