0

// variables tipo array vacías
nombres = [];
dni = [];
descripciones = [];

//variable creada para que me funcione el eliminar 
const nuevoID = (() => {
    let id = 0;
    return () => id++;
})();

// función para darle utilidad al botón
function ingresa() {
 
    var nombrePrueba = document.getElementById("nombre").value;  
    var dniPrueba = document.getElementById("dni").value;
    var descripcionPrueba = document.getElementById("descripcion").value;

    if (nombrePrueba == "", dniPrueba == "", descripcionPrueba == "") {

        alert("Completa tus datos, gracias.");

    } else if (!dniComprueba(dniPrueba)) {
        nombres.push(nombrePrueba); 
        dni.push(dniPrueba);
        descripciones.push(descripcionPrueba);
        document.getElementById("datos").innerHTML += 
            '<td>' + nombrePrueba + '</td>' + '        ' +
            '<td>' + dniPrueba + '</td>' + '        ' +
            '<td>' + descripcionPrueba + '</td>' + '        ' +
            '<input type="button" value="Borrar" onclick="elimina()">' + '<br>';
      } else {
        alert("Ya existe el dni");
    }

}

//me comprueba un dato específico, para no duplicar
function dniComprueba(dniPrueba) { 
    var compruebaDni = dni.find(element => element === dniPrueba); 
    if (compruebaDni) { 
        return true; 
    } else {
        return false; 
    }
}


// no comprendo bien, del significado de ésta función, 
function elimina() {
  
// no entiendo bien esta parte. donde llamo a un item. 
    dni.splice(dni.findIndex((item) => item.id === item.id), 1); // no me queda clara la estructura
       document.getElementById("datos").remove(); // aquí me borra todos los datos, no solo una línea 

}
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Probando </title>
    <script src="form6_3Arrays.js"></script>
</head>

<body>

    <h1>Base de datos</h1>

    <form value="">

        <input type="text" id="nombre" placeholder="Nombre" autofocus>
        <input type="text" id="dni" placeholder="dni">
        <input type="text" id="descripcion" placeholder="Descripcion">
        <input type="button" value="Agregar" onclick="ingresa()">

    </form>

    <div id="datos"> </div>

</body>

</html>

En la función eliminar, utilizo el método .splice(); como me habían aconsejado, pero hay varias cosas que no entiendo bien.

1.El por qué crear esa constante al principio para que genere id's. ¿Los genera con cada propiedad del array.? Si son 3 arrays, ¿Engloba.?

  1. Aún, siendo 3 arrays vacíos, ¿crea id por cada línea?

  2. En la función elimina(), busca un elemento llamado ítem, ¿pero de donde sale esa relación? Se denomina a medida que ingreso un dato.? Se crea automático.

4.Cuando ejecuto la función, me elimina todo lo del documento, entiendo que es porque se le llama a la función remove(), con la referencia que id que me llama del document y es masivo, pero no encuentro como hacer que me borre sólo la línea en la que le de el click al eliminar. (me lo hace borrado global).

  1. Al final de la función arrow, aparece un 1, eso significa que debería eliminar un sólo elemento.?

Gracias por su ayuda.

1 respuesta 1

0

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.

  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);
}
7
  • Muchas gracias @Devandmus, en la última función eliminar utilizas una serie de ${ }, por qué-? Entiendo que sin crear el id, esa función splice, ¿es imposible eliminar elementos específicos? Commented el 3 abr. 2021 a las 16:32
  • Hola! Esto "${ }" se llama template string, son muy útiles. Sin crear el ID puedes eliminar elementos específicos, pero es otro enfoque, dinámico y abstracto. Me pareció muy rudo porque no es tan visual, ya que el índice del objeto en el array siempre cambiará cuando se realicen cambios en el mismo, las referencias no pueden ser absolutas como con el ID sino que deben ser relativas y como te comento, requiere un código más abstracto. Hay muchas formas de hacer lo que buscas, la que te propuse es más fácil de entender a mi juicio. Coméntame cómo te va! Saludos
    – Devandmus
    Commented el 3 abr. 2021 a las 17:20
  • Gracias @Devandmus, un poco ,más claro, la función la he insertado en código que tenía escrito, pero no me funciona, puede que me esté dejando algo, no sé cómo puedo compartir código. Adicional, si utilizo esa función en código parecido, me borra todo. Es algo ambiguo, en uno borra todo en otro nada. Si me podrías ayudar,gracias.-Devandmus Commented el 4 abr. 2021 a las 18:55
  • Edita tu pregunta con tu nuevo código y veamos qué pasa.
    – Devandmus
    Commented el 4 abr. 2021 a las 18:57
  • Ya he subido el nuevo código (corregido), con las dudas y la función que me has recomendado. Gracias por tu ayuda @Devandmus Commented el 4 abr. 2021 a las 20:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.