Cree la siguiente tabla :
<table id="tabla1">
<tr id="fila0">
<th>DNI</th>
<th>NOMBRE</th>
<th>TELEFONO</th>
<th>ACCION</th>
</tr>
<tr id="fila1">
<th><p>1111111A</p></th>
<th><p>Administrador</p></th>
<th><p>555-000-111</p></th>
<th><button class="eliminar">Eliminar</button></th>
</tr>
<tr id="fila2">
<th><p>1111111B</p></th>
<th><p>Administrador</p></th>
<th><p>555-000-111</p></th>
<th><button class="eliminar">Eliminar</button></th>
</tr>
</table>
<br />
<button class="añadir">Añadir Contacto</button>
Y luego utlizo las siguientes funciones para eliminar y añadir contactos a mi tabla :
<script>
$(function () {
console.log("LEO");
$(".eliminar").click(function () {
var id = Number($(this).closest("tr").prop("id").slice(-1));
$("#fila" + id).remove();
});
$(".añadir").click(function () {
var index = $("table tr").length;
$("#tabla1").append(
`<tr id=fila${index}> <th><p>1111111C</p></th>
<th><p>Administrador</p></th>
<th><p>555-000-111</p></th>
<th><button class="eliminar">Eliminar</button></th></tr>`
);
console.log("Numero de Rows", index);
});
});
</script>
EL problema es que la row nueva que cree con $(".añadir") no me funciona, supuestamente si doy en el boton Eliminar deberia entrar a la funcion $(".eliminar") pues el boton tiene la clase eliminar. Pero en la practica no hace nada la funcion $(".eliminar") si me funciona con los dos primeros elementos que cree y el boton cuando se añade coje los estilos de la clase "eliminar"