Tengo una tabla que lleno después de cargar un archivo. Cuando cargo el archivo, puedo eliminar una fila seleccionada.
Pero cuando agrego una fila haciendo clic, ya no puedo eliminar esta fila.
Las filas se crean con lo siguiente:
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">'; }Haga clic en la imagen para agregar una fila
$('.table-add').click(function () { tableAddRow(document.getElementById("tablebody", "TEST")); });Borrar fila
$('.table-remove').click(function () { $(this).parents('tr').remove(); });No puedo eliminar una fila que agregué con un clic de botón. Parece que $('.table-remove') no se encuentra para una fila agregada manualmente.
En este punto estoy atascado. ¡Gracias por cualquier consejo!
Esto sucede porque el enlace de eventos ocurre en la carga del documento. Cualquier elemento que se inserte en el DOM después del documento inicial. Listo no será reconocido por el código que ya se ejecutó. Si inserta/elimina elementos dinámicamente después de cargar la página, debe vincular sus eventos al nuevo elemento cuando lo inserte.
Como sugiere la respuesta de Lalalena, debe vincular la función con el document para que se registre en el DOM , así:
$(document).on('click', '.table-remove', function () { $(this).parents('tr').remove(); });