Remove table row using jQuery

Question

The following is my code

Script

$(document).ready(function(){
    $(\'#click\').click(function(){
        $(\'#table\').append(\'&a         


        

Answer 1

If you want to remove the last table row of #table, you need to target it with your selector, and then call $.remove() against it:

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

Answer 2

If You want to remove row itself when click on table row then

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

If you want to add row on click of click button at the end of table

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

Answer 3

Find the last row with a selector and the delete that row like that:

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

This will delete the last row in the table. What if you want to delete the first?

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

That's it. There is codeschool online course for jQuery. You will find lot's of valuable stuff there including selectors and DOM manipulation. Here is a link: http://jqueryair.com/

Answer 4

You can't remove like that you have to specify which node you want to remove $('#table tr:first') and the remove it remove()

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

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

Answer 5

You can remove the last tr from the table using the table class on button click.

$('#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>

Answer 6

A demo is at http://jsfiddle.net/BfKSa/ or in case you are binding, add and delete to every row, this different demo http://jsfiddle.net/xuM4N/ come in handy.

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

As you mentioned: This will delete the "delete the last row of the table"

$('#table tr:last').remove(); will do the trick for your case.

Code

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