Delete row using jQuery

Question

I want the following functionality:

When the user clicks on any row it will get deleted.

I have tried the following, but there is a problem. If you click on the row it gets deleted fine, but when you add row by clicking on #click, the row is not getting deleted when I click on it.

Here's 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();

});
})

why r u duplicating your own question? stackoverflow.com/questions/10662691/… — sree
– sree, Commented May 19, 2012 at 6:24

icktoofay · Accepted Answer · 2012-05-19 06:16:45Z

4

click just forwards to bind, and bind only binds to what matches the elements in the jQuery object at the time of creation. You probably want to use on with its selector parameter:

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

Try it on JSFiddle.

answered May 19, 2012 at 6:16

icktoofay

130k23 gold badges261 silver badges239 bronze badges

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

Comments

Dhiraj · Accepted Answer · 2012-05-19 06:24:18Z

1

You shoud bind a click handler to each row using on (tr)

.on() method attaches event handlers to the currently selected set of elements

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

DEMO

Hope this helps

edited May 19, 2012 at 6:24

answered May 19, 2012 at 6:17

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Comments

Taha Paksu · Accepted Answer · 2012-05-19 06:17:49Z

0

Because you are not assigning the event to the appended row. Try appending the row like this:

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

answered May 19, 2012 at 6:17

Taha Paksu

15.6k2 gold badges50 silver badges83 bronze badges

Collectives™ on Stack Overflow

Delete row using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related