0

So I've got a table of 'skills' for which an input looks up an array to check if it can be added to a current skills array to be displayed in the table.

Each row has a remove button, however adding new rows to the table - the remove button doesnt seem to work.

Here is the JSFiddle I'm using: https://jsfiddle.net/hyc61qtx/

This is how I currently remove the table row:

$('.remove-skill').on('click', function() {
    var $kill = $(this).parent('td').parent('tr');
    $kill.addClass('danger');
    $kill.fadeOut(1250, function() {
        $(this).remove();
    });
});
madcrazydrumma
  • 1,847
  • 3
  • 20
  • 38

1 Answers1

-1

You are getting all elements which are presented now on the page and subscribe on their click event, but it will not affect elements added later. You need to subscribe on document with filtering by target.

This should work:

$(document).on('click', '.remove-skill', function() {
    var $kill = $(this).parent('td').parent('tr');
    $kill.addClass('danger');
    $kill.fadeOut(1250, function() {
        $(this).remove();
    });
});
Eugene Tsakh
  • 2,777
  • 2
  • 14
  • 27
  • Even that doesn't work. The table is in a modal that I include through PHP, but still that doesnt work. Even adding that to JSFiddle doesn't work – madcrazydrumma Oct 31 '16 at 15:35