Почему это не убирает стол?

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')) (восклицательный знак), чтобы посмотреть, удаляет ли он всю таблицу и удалил ее, но я проверялэлемент таблицы до и после удаления последней строки и получения этого

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

JS говорит, что tbody не пуст, Google Chrome говорит иначе.Я не знаю как это исправить

Answer 1

Проблема в том, что после удаления относительные селекторы, такие как .closest(), ничего не сделают, поскольку у этого элемента больше нет родителя.Также :empty не работает, поскольку он включает текстовые узлы , из документов :

Выберите все элементы, которые имеютнет дочерних элементов (включая текстовые узлы).

Так что :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;
});

Вы можетеПосмотрите короткую демонстрацию здесь , если селектор :not(:has(tr)) не соответствует никому ... и не будет, если не будет <tbody> без строки, он просто ничего не удалит.

Answer 2

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

, поэтому

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

должно сработать.

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

обновление

Как упомянуто Ник Крейвер , это поведение вызвано самим HTML markup. *Например, 1023 *

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

БУДЕТ работать с :empty также.