Cannot delete a row after I inserted it via button - HTML/JS

Question

I have a table that I fill after a file upload. When I upload the file I can delete a selected row.

But when I add a row via click I cannot delete this row anymore.

The rows are created with the following:

function addTableRow(table, value)
{
 var table = document.getElementById("tablebody");
 var row = table.insertRow();
 var cell1 = row.insertCell(0);
 var cell2 = row.insertCell(1);

 cell1.innerHTML = value;
 cell2.innerHTML = '<img class="table-remove" style="height:15px;" src="images/delete.png">';
}

Click on Image to add row

 $('.table-add').click(function () {
    tableAddRow(document.getElementById("tablebody", "TEST"));
  });

Delete Row

$('.table-remove').click(function () {
    $(this).parents('tr').remove();
  });

I cannot delete a row that I added with a button click. It seems that $('.table-remove') is not found for a manually added row.

At this point I'm stuck. Thanks for any advice!

Answer 1

As the answer from Lalalena suggests, you need to bind the function with document so that it is registered in the DOM, like this:

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