Удалить строку таблицы с помощью jQuery

Ниже приведен мой код

Script

$(document).ready(function(){
    $('#click').click(function(){
        $('#table').append('<tr><td>&nbsp;</td></tr>');
    })
    $('#remove').click(function(){
        $('#table').remove('<tr><td>&nbsp;</td></tr>');
    })
})

HTML

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="table">
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>
<div id="click">click</div>
<div id="remove">remove</div>

Когда я добавляю строку, она отлично работает, но я не знаю, как удалить последнюю строку таблицы. Вы также можете проверить онлайн-демонстрацию .

Как я могу это сделать?

Кроме того, я хочу, когда пользователь также нажимает на любую строку, которую он удалит сам. Я пробовал, но есть проблема. Если вы нажмете на строку, она удалит себя, но когда вы добавите строку, щелкнув в #click, строка не удалит себя, щелкнув по ней.

Вот мой код:

Script

$(document).ready(function(){
    $('#click').click(function(){
        $('#table').append('<tr><td>&nbsp;</td></tr>');
    })
    $('#remove').click(function(){
        $('#table tr:last').remove();
    })
    $('#table tr').click(function(){
        $(this).remove();
    });
})

Ответ 1

Если вы хотите удалить последнюю строку таблицы #table, вам нужно настроить таргетинг на нее с помощью вашего селектора, а затем вызвать $.remove() против него:

$('#remove').on("click", function(){
    $('#table tr:last').remove();
})

Ответ 2

Вы не можете удалить так, что вы должны указать, какой node вы хотите удалить $('#table tr:first'), и удалить его remove()

$('#remove').click(function(){
    $('#table tr:first').remove();
})

http://jsfiddle.net/2mZnR/1/

Ответ 3

Демо находится в http://jsfiddle.net/BfKSa/ или, если вы привязываетесь, добавляете и удаляете каждую строку, это другое демо http://jsfiddle.net/xuM4N/ пригодится.

API: remove = > http://api.jquery.com/remove/

Как вы упомянули: это приведет к удалению "удалить последнюю строку таблицы"

$('#table tr:last').remove(); сделает трюк для вашего дела.

Код

$(document).ready(function(){
    $('#click').click(function(){
        $('#table').append('<tr><td>foo add&nbsp;</td></tr>');
    })
    $('#remove').click(function(){
        $('#table tr:last').remove();
    })
})

Ответ 4

Найдите последнюю строку с селектором и удалите эту строку следующим образом:

$('#table > tr:last').remove();

Это приведет к удалению последней строки в таблице. Что делать, если вы хотите удалить первый?

$('#table > tr:first').remove();

Что это. В jQuery есть курс онлайн-курсов. Вы найдете много ценных вещей, включая селекторов и манипуляции с DOM. Вот ссылка: http://jqueryair.com/

Ответ 5

Вы можете удалить последний tr из таблицы, используя класс таблицы при нажатии кнопки.

$('#remove').on("click", function(){
    $('.tbl tr:last').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tbl" width="100%" border="1" cellspacing="0" cellpadding="0" >
    <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>
<button id="remove">remove</button>

Ответ 6

Если вы хотите удалить строку непосредственно при нажатии на строку таблицы, то

$('table tr').on("click", function(){
    $(this).remove();
});

Если вы хотите добавить строку нажатием кнопки щелчка в конце таблицы

 $('#click').click(function(){
    $('#table').append('<tr><td>Xyz</td></tr>');
})