У меня есть эта структура таблицы

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

В каждой строке есть кнопка удаления, которая использует AJAX и удаляет сам элемент tr. Что происходит: может случиться так, что тело станет пустым, когда все строки будут удалены, когда это произойдет, я хотел бы удалить всю таблицу.

Я знаю, что есть псевдоселектор $('#latest tbody:empty'), но он выбирает только tbody. Я хочу выбрать всю таблицу, когда тело пусто или что-то в этом роде.

РЕДАКТИРОВАТЬ после ответов

Я проверил элемент после удаления всех строк: внутри тега есть только тег thead. Тем не менее, он не удалил элемент таблицы. Посмотри код

// 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;
});
4
Rodrigo Souza 25 Июн 2010 в 13:23

5 ответов

Лучший ответ

Я не могу проверить, является ли элемент пустым или нет, потому что он никогда не будет пустым, поскольку текстовые узлы все еще остаются в его разметке. Я должен проверить, есть ли <table> внутри <tr>.

0
Rodrigo Souza 10 Авг 2010 в 17:06
if($('#latest tbody').is(':empty'))
   $('#latest').remove();

Вы можете сжать это до

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

обновить

Это не сработает. Похоже, remove() и detach() оставляют какой-то crud после удаления элемента tr. Это как пробел или разрыв строки, поэтому, поскольку селектор :empty также проверяет наличие текстовых узлов, он вовсе не пуст.

Так

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

Должен сделать свое дело.

Ссылка: http://jsbin.com/esaye3/2/edit

4
jAndy 25 Июн 2010 в 10:41
$("#latest:has('tbody:empty')").remove();
0
na43251 25 Июн 2010 в 09:33

Как насчет:

$('#latest tbody:empty').parent(); 
0
S.. 25 Июн 2010 в 09:28
if ($('#latest tbody').children().length==0) {
  $('#latest').remove();
};
0
Gert Grenander 25 Июн 2010 в 09:50