当 tbody 内没有 tr 元素时删除表元素答案

【问题标题】：Deleting table element when it has no tr element inside tbody当 tbody 内没有 tr 元素时删除表元素
【发布时间】：2010-06-25 09:23:24
【问题描述】：

我有这个表结构

<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 元素本身。发生的情况是：当所有行都被删除时，tbody 可能会变为空，当这种情况发生时，我想删除所有表。

我知道有一个伪选择器$('#latest tbody:empty')，但这只会选择tbody。当 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;
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

你可以把它压缩成

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

更新

这行不通。看起来remove() 和detach() 在删除tr 元素后确实留下了某种crud。它就像一个空格或换行符，所以由于:empty 选择器也检查文本节点，它根本不是空的。

所以

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

应该可以解决问题。

参考：http://jsbin.com/esaye3/2/edit

【讨论】：

我在删除所有行后检查了元素：标签内只有和 thead 标签。尽管如此，它并没有删除 table 元素。看我的代码snipt.org/Qouthx

@rasouza：从您的代码中，您可能应该使用$(this).closest('table').find('tbody').is(':empty') 作为if-statement

为什么没有 if 语句代码在这种情况下不起作用？为什么我必须使用 find()？谢谢

抱歉无知，但它仍然无法正常工作。看看现在怎么样：snipt.org/Qou

哇.. 对，我测试了一下。似乎.remove() 和detach() 删除了元素，但它们留下了某种空白或断线，所以由于:empty 还检查文本节点它不是空的。使用if($('#latest tbody').children().length() < 1) 作为声明！

【解决方案2】：

怎么样：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

我无法检查元素是否为空，因为它永远不会为空，因为文本节点仍保留在其标记内。我必须检查<table> 里面是否有<tr>。

【讨论】：