Skip to main content
se añadieron 2118 caracteres en el cuerpo
Origen Enlace
Devandmus
  • 667
  • 4
  • 7

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();
}
  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.idsea 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.

Hay que aterrizar muchos conceptos para evitar incomprensiones.

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();
}
  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.idsea 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.

Origen Enlace
Devandmus
  • 667
  • 4
  • 7

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

<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

<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.

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.

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.

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);
}