[jQuery] Deleting table element when it has no tr element inside tbody

Question

I have this table structure

<table id="latest" class="debt">
    <thead>
    <tr>
        <th width="50">Credor</th>
        <th width="50">Devedor</th>
        <th>Motivo</th>
        <th width="80">Valor</th>
        <th width="10"></th>
    </tr>
    </thead>
    <tbody>
    <?php foreach ($this->latest as $latest) { ?>
        <tr <?php if ($latest->reg_value < 0) { echo "class='error'"; } ?>>
        <td><?php echo $latest->findParentRow('Application_Model_DbTable_Names','Creditor')->nam_name; ?></td>
        <td><?php echo $latest->findParentRow('Application_Model_DbTable_Names','Debtor')->nam_name; ?></td>
        <td><?php echo $latest->reg_reason; ?></td>
        <td>R$ <?php echo number_format(abs($latest->reg_value), 2, ',', ' ')?></td>
        <td><a href="#" id="<?php echo $latest->reg_id; ?>" class="delete"><img src="http://192.168.0.102/libraries/css/blueprint/plugins/buttons/icons/cross.png" alt=""/></a></td>
        </tr>
    <?php } ?>
    </tbody>
</table>

each row has a delete button which uses AJAX and removes the tr element itself. What happens is: it may happen the tbody become empty when all rows are deleted, when this happens I'd like to delete all the table.

I know there is a pseudo-selector $('#latest tbody:empty')but this selects only the tbody. I want to select the whole table when the tbody is empty or something like it.

EDIT after answers

I inspected the element after deleting all rows: there's only and the thead tag inside the tag. Still, it didn't removed the table element. Look at the code

// TR Fading when deleted
$('.delete').live('click', function() {
    $.ajax({
    type: 'POST',
    url: 'history/delete/id/'+$(this).attr('id')
    });
    $(this).closest('tr').fadeOut('slow', function() {
    $(this).remove();
    if($(this).closest('table').find('tbody').is(':empty'))
        $('#latest').remove();
    });
    return false;
});

Answer 1

if($('#latest tbody').is(':empty'))
   $('#latest').remove();

your might compress this to

$('#latest tbody:empty').parent().remove();

update

This won't work. It looks like remove() and detach() do leave some kind of crud behind after they remove a tr element. It's like a whitespace or a linebreak, so since the :empty selector also checks for textnodes, it's not empty at all.

so

if($('#latest tbody').children().length() < 1)
   $('#latest').remove();

should do the trick.

Reference: http://jsbin.com/esaye3/2/edit

Answer 2

How about:

$('#latest tbody:empty').parent(); 

Answer 3

$("#latest:has('tbody:empty')").remove();

Answer 4

if ($('#latest tbody').children().length==0) {
  $('#latest').remove();
};

Answer 5

I can't check if the element is empty or not 'cause it will never be empty for text nodes still remains inside its markup. I have to check if the <table> has <tr> inside it.