Question

我有这段代码

// 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;
});

当我想通过删除按钮删除表格行时触发（如图所示） image http://aviary.com/viewfull?fguid=433f68f6-d18d-102d-a9f3-0030488e168c&nowatermark=true

表可能会出现表行空。我想在发生这种情况时删除整个表，但是表没有被删除。行代码$(this).remove();有效且this似乎引用该范围中的tr元素，因为整行被删除但接下来的两行不起作用。该表未被删除。

修改

我将if($(this).closest('table').find('tbody').is(':empty'))更改为if(!$(this).closest('table').find('tbody').is(':empty'))（感叹号）以查看它是否删除并删除了整个表格，但我在删除最后一行之前和之后检查了表格元素并得到了此< / p>

image http://rookery9.aviary.com.s3.amazonaws.com/4344000/4344383_4fbd.png

JS说tbody不是空的，google chrome说不然。我不知道如何解决它

Answer 1

问题在于，一旦删除它，.closest()之类的相对选择器将不会执行任何操作，因为该元素不再具有父级。另外:empty无效，因为包含文字节点，from the docs：

选择所有没有子元素的元素（包括文本节点）。

如果剩下任何空白区域，那么:empty将无法匹配（提醒或记录$("latest tbody").html())以查看我的意思），几乎可以肯定的是，下面的示例也是如此。相反，您可以使用:has(tr)来检查表格行，而使用:not()来否定这一行，如下所示：

$('.delete').live('click', function() {
    $(this).closest('tr').fadeOut('slow', function() {
        $(this).remove();
        $("#latest tbody:not(:has(tr))").parent().remove();
    });
    return false;
});

You can view a quick demo here，如果:not(:has(tr))选择器与任何内容都不匹配...如果没有无行<tbody>则不会，它就不会删除任何内容

Answer 2

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

所以

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

应该这样做。

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

<强>更新

与 Nick Craver 一样，此行为是由HTML markup本身引起的。

<tbody><tr><td>Something</td><td>Anything?</td><td><button class="delete">delete</button></td></tr></tbody>

例如，WILL将与:empty一起使用。

为什么不删除表？

修改

2 个答案: