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

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!

2 answers

  • answered 2022-05-04 10:37 Lalalena

    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.

  • answered 2022-05-04 10:42 Haseeb Hassy

    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();
    });
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum