Remove table row using jQuery

Question

The following is my code

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>

When I add a row it works great, but I don't know how to delete the last row of the table. You can also check the online demo.

How can I do this?

In addition, I want when the user also clicks on any row it will delete itself. I have tried out, but there is a problem. If you click on the row it is deleting itself, but when you add a row by clicking in #click then the row is not deleting itself by clicking on it.

Here is my code:

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

your script will not know which row to be deleted... bind the .on() event and then try.. — sree
– sree, Commented May 19, 2012 at 5:57

Sampson · Accepted Answer · 2012-05-19 05:54:36Z

34

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

answered May 19, 2012 at 5:54

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sagar Naliyapara Over a year ago

For dynamic content make row id unique you can do it by appending something unique like this for php <tr id="myTableRow<?php echo $id; ?>"> and same thing when you remove it :)

yokoloko · Accepted Answer · 2012-05-19 05:54:50Z

5

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/

answered May 19, 2012 at 5:54

yokoloko

2,8703 gold badges23 silver badges27 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 19, 2012 at 6:03

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2016-07-13 09:58:19Z

1

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>

edited Jul 13, 2016 at 9:58

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 13, 2016 at 8:14

Kalu Singh Rao

1,6971 gold badge16 silver badges21 bronze badges

Comments

Itay Grudev · Accepted Answer · 2012-05-19 05:57:11Z

0

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/

answered May 19, 2012 at 5:57

Itay Grudev

7,5644 gold badges60 silver badges97 bronze badges

Comments

Kumar Rakesh · Accepted Answer · 2017-01-23 05:48:24Z

0

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

edited Jan 23, 2017 at 5:48

answered Jul 13, 2016 at 10:06

Kumar Rakesh

2,7082 gold badges20 silver badges39 bronze badges

Collectives™ on Stack Overflow

Remove table row using jQuery

Script

HTML

Script

6 Answers 6

1 Comment

Comments

Code

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Script

HTML

Script

6 Answers 6

1 Comment

Comments

Code

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related