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