Tengo una tabla en la que agrego y elimino dinámicamente filas. Al presionar 'eliminar', quiero eliminar toda la fila. Esto funciona limpiamente con las filas ya existentes, pero cuando se usa la misma función para las nuevas filas, elimina todo.
¿Cómo puedo eliminar solo las filas recién creadas, no todas las filas?
He intentado usar find() para encontrar el tr pero no funciona.
$("#addRow").click(function() { $("#table").append( `<tr>`, `<td></td>`, `<td></td>`, `<td></td>`, `<td></td>`, `<td></td>`, `<td class="remove"><button>Remove</button></td>`, `</tr>` ); $('.remove button').on('click', function() { removeRow($(this)) }); }) $('.remove button').on('click', function() { removeRow($(this)) }); function removeRow(row) { row.parent().parent().remove(); } #table { width: 80%; margin-left: auto; margin-right: auto; } #table td { width: 20%; border: solid 1px black; } #table .remove { border: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="table"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="remove"><button>Remove</button></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="remove"><button>Remove</button></td> </tr> </table> <p><button id="addRow">Add a new row</button></p>El problema es que está agregando el nuevo contenido HTML como elementos individuales, por lo que no se genera correctamente. Si usa el inspector DOM después de llamar a append() , verá el problema.
Para solucionar esto, concatene las cadenas HTML y append() en una sola operación:
$("#table").append( `<tr>` + `<td></td>` + `<td></td>` + `<td></td>` + `<td></td>` + `<td></td>` + `<td class="remove"><button>Remove</button></td>` + `</tr>` );Dicho esto, el código que está utilizando no es ideal y debe mejorarse.
En primer lugar, use un elemento <template /> para almacenar el HTML que se creará dinámicamente dentro de su página HTML real. Evite poner HTML dentro de JS tanto como sea posible. Es una mala práctica hacerlo debido a que es una violación del principio de separación de preocupaciones.
A partir de ahí, use el método closest() de jQuery para encontrar el elemento tr principal que se eliminará en lugar de encadenar varias llamadas a parent() .
Finalmente, use un solo controlador de eventos delegado en el botón .remove para que no tenga que volver a vincularlo cada vez que se crea una nueva fila.
Con esas correcciones aplicadas, su código debería verse así:
let rowTemplate = $('#row-template').html(); $("#addRow").click(function() { $("#table").append(rowTemplate); }) $(document).on('click', '.remove button', e => { $(e.target).closest('tr').remove(); }); #table { width: 80%; margin-left: auto; margin-right: auto; } #table td { width: 20%; border: solid 1px black; } #table .remove { border: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="table"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="remove"><button>Remove</button></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="remove"><button>Remove</button></td> </tr> </table> <p><button id="addRow">Add a new row</button></p> <template id="row-template"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="remove"><button>Remove</button></td> </tr> </template>