Удалить элемент, если последний

Question

Не знаю, возможно ли это, но посмотрим ...

У меня есть таблица:

<table cellspacing="0" class="stripey">
            <thead>
                <tr>
                    <td class="center"></td>
                    <td>Plan Name</td>
                    <td class="options">Options</td>
                </tr>
            </thead>
            <tbody>
                <?php 
                foreach ($result as $row) {
                ?>
                <tr class="<?php echo alternator('', 'odd'); ?>" id="record-<?php echo $row['id'];?>">
                    <td class="center"></td>
                    <td><?php echo $row['name']; ?></td>
                    <td class="options"><img src="<?php echo base_url();?>inc/images/search.png"> <img src="<?php echo base_url();?>inc/images/pencil.png"> <a href="#" class="delete" title="delete"><img src="<?php echo base_url();?>inc/images/delete.png"></a></td>
                </tr>
                <?php
                }
                ?>
            </tbody>
        </table>

Как вы можете видеть, <tr> повторяется, сколько бы ни было в $result ... но у меня есть изображение, позволяющее мне удалить элемент ... поэтому я написал:

$('a.delete').click(function() {
    var parent = $(this).parents("tr:first");
    $.ajax({
        type: 'get',
        url: '/plans/delete',
        data: 'id='+ parent.attr('id').replace('record-', ''),
        beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},300);
        },
        success: function(msg) {
            parent.children('td').wrapInner('<div>');
            parent.children('td').children('div').slideUp(500,function() {
            parent.remove();
            $('.stripey tr').removeClass('odd');
            $('.stripey tr:even').addClass('odd');

            });
        }
    });
    return false;       
});

Теперь я хотел бы знать, можно ли как-то сказать, сколько элементов tr содержится в tbody, чтобы при наличии 0 я мог заменить всю таблицу текстом, указав, что его нет .

Answer 1

Вы можете использовать свойство length объекта jQuery dom ...

if($('table.stripey tbody tr').length == 0) {
    // do something
}

Answer 2

Вы можете проверить length из children из tbody:

if($("tbody").children().length) {
    console.log("There is still at least one row.");
}else{
    console.log("There are no more rows.");
}

Answer 3

Вы можете использовать следующую строку, чтобы получить общее количество trs в обработчике события привязки click.

var totalNoOfTrs =  $(this).closest("tbody").children().length;

$('a.delete').click(function() {
    var parent = $(this).parents("tr:first");
    var $tr = $(this).closest("tr");
    $.ajax({
        type: 'post',
        url: '/plans/delete',
        data: 'id='+ parent.attr('id').replace('record-', ''),
        beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},300);
        },
        success: function(msg) {
            var $tbody = $tr.closest("tbody");
            $tr.remove();
            if($tbody.children().length > 0){
               $('.stripey tr').removeClass('odd');
               $('.stripey tr:even').addClass('odd');
            }
            else{
               //Replace the table with appropriate message.
               $('.stripey').replaceWith("<div>No rows to delete</div>");
            }

        }
    });
    return false;       
});

В приведенном выше коде this указывает на элемент привязки с classdelete и ближайший из tbody дадут элемент tbody, который содержит все trs, а затем children() из tbody дадут все элементы tr внутри него.