Question

I am trying to add and remove table rows with jQuery, added rows contain a remove link, which for some reason doesn’t work on the generated elements, even though I use on.

Here my code:

$("#target").click(function() {
$('#myTable tr:last').after('<tr><td>Bla</td><td><div class="remove">REMOVE</div></td></tr>');
});
$(".remove").on('click', function(event) {
  $(this).parent().parent().remove();
});

http://jsbin.com/ucopun/1/

What could be the problem?

The remove link is supposed to remove the whole row in which it is located.

Answer 1

When you use on(), you still need to bind the event to a container element that exists on the page already. I think this is what you want:

$("#myTable").on('click', '.remove', function(event) {
  $(this).parent().parent().remove();
});