Update: Primero que todo, en tu HTML, insisto: si vas a trabajar con fragmentos de tabla, estructura una tabla, no trabajes con un div: ```html <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: ```javascript 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: ```javascript function elimina(byID) { baseDatos.splice(baseDatos.findIndex((item) => item.id === byID), 1); document.getElementById(`linea-id-target-${byID}`).remove(); } ``` 1. La función "elimina" recibe un argumento, `byID`. Este lo envía el mismo botón cuando llamas la función elimina. 2. 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. 3. La siguiente línea, donde uso `.remove()`, tiene como target la línea cuyo ID tiene relación con `byID`, 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. 1. Lo que ocurra en tu arreglo es independiente de lo que se imprime en pantalla por como lo tienes escrito. 2. El HTML no cambia si borras algo en el `Array` porque no existe ningún vínculo. 3. Tu manera de eliminar es con el nombre de la variable, lo que solo te permite eliminar el último creado, además, sobreescribes `#datos` con el objeto eliminado, lo que no creo sea lo que buscas. Si deseas controlar el HTML, debes utilizar funciones dinámicas. Existen muchas formas de hacer lo que buscas, unas mejores que otras, pero por tiempo me limitaré a editar el código que compartiste para obtener el resultado que esperas. Supongo que tienes algo así para escribir los datos ```html <input type="text" id="nombre" /> <input type="text" id="dni" /> <input type="text" id="descripcion" /> <button onclick="ingresarDatos()">Inserta</button> ``` Te propongo estructurar la tabla ```html <table> <thead> <tr> <td>Nombre</td> <td>DNI</td> <td>Descripción</td> <td>Acción</td> </tr> </thead> <tbody id="datos"></tbody> </table> ``` Se agregan las variables globales. La función `nuevoID` es clave porque te permitirá crear identificadores únicos para cada instancia. Es la forma más sencilla que se me ocurre para manipular el DOM según tu estructura. ```javascript const baseDatos = []; // generador de ID dentro de un closure para protegerlo const nuevoID = (() => { let id = 0; return () => id++; })(); ``` En el constructor de objeto se llama la función para nuevo ID. Se autoincrementa automático, por lo que siempre tendrás un único ID por persona. ```javascript function ingresarDatos() { function Persona(nombre, dni, descripcion) { this.id = nuevoID(); // vínculo con ID this.nombre = document.getElementById("nombre").value; this.dni = document.getElementById("dni").value; this.descripcion = document.getElementById("descripcion").value; } nuevoUsuario = new Persona(this.nombre, this.dni, this.descripcion); agregar(nuevoUsuario.id); } function agregar(curentID) { baseDatos.push(nuevoUsuario); // se crea un node tr para guardar la información de la línea const nuevaLinea = document.createElement("tr"); // se le atribuye un ID en el DOM igualmente nuevaLinea.id = `linea-id-target-${curentID}`; nuevaLinea.innerHTML = ` <td>${nuevoUsuario.nombre}</td> <td>${nuevoUsuario.dni}</td> <td>${nuevoUsuario.descripcion}</td> <td><input type="button" value="Borrar" onclick="elimina(${curentID})"></td> `; // se añade al final de datos document.getElementById("datos").appendChild(nuevaLinea); } ``` Aquí viene la magia. Cuando se solicita eliminar, la función viene con un parámetro, el ID único que permite encontrar el objeto en tu array como en el DOM. ```javascript function elimina(byID) { // elimina en Javascript baseDatos.splice(baseDatos.findIndex((item) => item.id === byID), 1); // elimina de la interface por ID document.getElementById(`linea-id-target-${byID}`).remove(); console.log(baseDatos); } ```