Update:
Primero que todo, en tu HTML, insisto: si vas a trabajar con fragmentos de tabla, estructura una tabla, no trabajes con un div:
<table>
<thead>
<tr>
<td>Nombre</td>
<td>DNI</td>
<td>Descripción</td>
<td>Acción</td>
</tr>
</thead>
<tbody id="datos"></tbody>
</table>
Segundo, me concentraré en la función elimina:
function elimina() {
dni.splice(dni.findIndex((item) => item.id === item.id), 1);
document.getElementById("datos").remove();
}
La función que escribiste está mala a como yo te la escribí: eliminaste la referencia del índice y además escribes document.getElementById("datos").remove();
, eso, por supuesto, solo borrará el id en cuestión, estás voluntariamente eliminando toda la información de datos cuando borras una entrada.
Volveré a escribir el código que te propuse, presta atención:
function elimina(byID) {
baseDatos.splice(baseDatos.findIndex((item) => item.id === byID), 1);
document.getElementById(`linea-id-target-${byID}`).remove();
}
- La función "elimina" recibe un argumento,
byID
. Este lo envía el mismo botón cuando llamas la función elimina. - Splice elimina o agrega elementos: cuando recibe solo 2 argumentos, elimina. Si elimina, el primer argumento que recibe es el index del elemento en el arreglo, el segundo argumento es cuántos elementos afectará desde ese índice. En tu caso, el código que te propuse le dice a splice que reciba como primer argumento el índice cuyo
item.id
sea igual al id de la función "elimina" y luego, desde esa posición le pide que borre "1", es decir, el elemento en cuestión. - La siguiente línea, donde uso
.remove()
, tiene como target la línea cuyo ID tiene relación conbyID
, es decir, busca específicamente la línea a la que el botón "Borrar" pertenece. Como tú lo haces eliminas "datos", lo que destruye todo.
Dime si te quedó más claro, lee bien la primera respuesta que te dejé ya que muchas de las cosas que te propongo no las aplicaste en tu nuevo código y sigue defectuoso.
Hilo antiguo:
Hay que aterrizar muchos conceptos para evitar incomprensiones.