Removing a table element when it does not have a 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 line has a delete button that uses AJAX and removes the tr element itself. What happens: it may happen that tbody becomes empty when all rows are deleted, when this happens, I want to delete the entire table.

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

EDIT after replies

I checked the element after deleting all the lines: there and thead tag inside the tag. However, he did not delete 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

I cannot check if an element is empty or not, because it will never be empty, since text nodes still remain inside its markup. I have to check if there is a <table> <tr> inside it.

Answer 2

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

your way to squeeze it on

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

Update

This will not work. It seems that remove() and detach() leave tr a crud . This is like a space or a string, since the :empty selector also checks for text fields, it is not empty at all.

So

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

gotta do the trick.

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

Answer 3

What about:

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

Answer 4

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

Answer 5

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