0

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!

Rowan
  • 53
  • 1
  • 10
  • Add an id instead of a class, a class is global, you can add an id like id="my_row-'+timestamp+'", with var timestamp = Date.now(); You get the id of item on click and remove the row with this id. – SNS - Web et Informatique May 04 '22 at 10:32
  • @SNS-WebetInformatique that's a really bad solution you suggested. IDs are not necessary at all, specially not bloating IDs with timestamps - which BTW can end up being duplicates. – Roko C. Buljan May 04 '22 at 10:48

2 Answers2

0

This happens because event binding happens on document load. Any elements that get inserted into the DOM after the inital document.ready won't be recognized by the code that has already run. If you dynamically insert/remove elements after page load, you need to bind your events to the new element when you insert it.

Shrimp
  • 472
  • 3
  • 9
0

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();
});
Haseeb Hassy
  • 522
  • 8
  • 20