Skip to main content
He ingresado la función eliminar(), junto con el método .splice() y su función arrow para ejecutarla. Por recomendaciones. Gracias
Origen Enlace

¿Cómo elimino elemento en array? Método .splice(), no me funciona correctamente. JavaScript

var baseDatos = [];

function ingresarDatos() {

function Persona(nombre, dni, descripcion) { // coloco parámetros del formualrio
    
    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(); 
// 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>

}

 

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

baseDatos.push(nuevoUsuario);

document.getElementById("datos").innerHTML += '<td>' + nuevoUsuario.nombre + '</td>' + '     ' +
    '<td>' + nuevoUsuario.dni + '</td>' + '      ' +
    '<td>' + nuevoUsuario.descripcion + '</td>' + '         ' +
    '<input type="button" value="Borrar" onclick="elimina()">' + '</br>';

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

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

baseDatos.pop(nuevoUsuario);
document.getElementById("datos").innerHTML = nuevoUsuario ; 

console.log(baseDatos); // Si me funciona correctamente en consola
  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. Que debo colocar, para que me elimine sólo el elemento que seleccione al pulsar el botón, y me siga mostrando todo el array en document, sin el elemento ya eliminado.
  2. Si doy al botón eliminar, me elimina en console, pero en el document no me vuelve a mostrar lo que queda del array.
  3. He intentado llamando a al array general y/o a la variable global, pero me sobrescribe y no me da datos ingresados anteriormente. No sé, si el método .pop() es el ideal.
  4. He dejado el código para que se entienda de lo que hablo en js. Muchas gracias

¿Cómo elimino elemento en array?

var baseDatos = [];

function ingresarDatos() {

function Persona(nombre, dni, descripcion) { // coloco parámetros del formualrio
    
    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(); 

}

function agregar() {

baseDatos.push(nuevoUsuario);

document.getElementById("datos").innerHTML += '<td>' + nuevoUsuario.nombre + '</td>' + '     ' +
    '<td>' + nuevoUsuario.dni + '</td>' + '      ' +
    '<td>' + nuevoUsuario.descripcion + '</td>' + '         ' +
    '<input type="button" value="Borrar" onclick="elimina()">' + '</br>';

}

function elimina() {

baseDatos.pop(nuevoUsuario);
document.getElementById("datos").innerHTML = nuevoUsuario ; 

console.log(baseDatos); // Si me funciona correctamente en consola

}

  1. Que debo colocar, para que me elimine sólo el elemento que seleccione al pulsar el botón, y me siga mostrando todo el array en document, sin el elemento ya eliminado.
  2. Si doy al botón eliminar, me elimina en console, pero en el document no me vuelve a mostrar lo que queda del array.
  3. He intentado llamando a al array general y/o a la variable global, pero me sobrescribe y no me da datos ingresados anteriormente. No sé, si el método .pop() es el ideal.
  4. He dejado el código para que se entienda de lo que hablo en js. Muchas gracias

Método .splice(), no me funciona correctamente. JavaScript

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

Origen Enlace

¿Cómo elimino elemento en array?

var baseDatos = [];

function ingresarDatos() {

function Persona(nombre, dni, descripcion) { // coloco parámetros del formualrio
    
    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(); 

}

function agregar() {

baseDatos.push(nuevoUsuario);

document.getElementById("datos").innerHTML += '<td>' + nuevoUsuario.nombre + '</td>' + '     ' +
    '<td>' + nuevoUsuario.dni + '</td>' + '      ' +
    '<td>' + nuevoUsuario.descripcion + '</td>' + '         ' +
    '<input type="button" value="Borrar" onclick="elimina()">' + '</br>';

}

function elimina() {

baseDatos.pop(nuevoUsuario);
document.getElementById("datos").innerHTML = nuevoUsuario ; 

console.log(baseDatos); // Si me funciona correctamente en consola

}

  1. Que debo colocar, para que me elimine sólo el elemento que seleccione al pulsar el botón, y me siga mostrando todo el array en document, sin el elemento ya eliminado.
  2. Si doy al botón eliminar, me elimina en console, pero en el document no me vuelve a mostrar lo que queda del array.
  3. He intentado llamando a al array general y/o a la variable global, pero me sobrescribe y no me da datos ingresados anteriormente. No sé, si el método .pop() es el ideal.
  4. He dejado el código para que se entienda de lo que hablo en js. Muchas gracias