Resumen

En esta entrada te mostraré cómo podemos eliminar un elemento de un array en JavaScript, ya sea a partir de su índice o a partir de su valor.

Vamos a usar el método splice de los arreglos en JavaScript, acompañado en alguna ocasión de indexOf o de findIndex según sea el caso.

El método splice de los arrays en JS

Este método bien ha de servir para otros propósitos, pero también sirve para eliminar un item de un arreglo en JavaScript.

Su sintaxis, para estos usos, es:

arreglo.splice(indiceDeElementoQueSeElimina, 1);

¿Por qué?

Porque splice toma:

1. Posición desde donde se comienza a eliminar
2. Cuántos elementos eliminar
3. Otros elementos que se insertan en donde se eliminó el elemento (de hecho acepta parámetros infinitos después del 2, que son los elementos que se insertan).

Como en este caso solo queremos eliminar uno, se usa de la forma que dije:

arreglo.splice(indiceDeElementoQueSeElimina, 1);

Nota: esta función modifica al arreglo, de manera interna. Lo que devuelve son los elementos eliminados.

Ejemplo de splice

Veamos un ejemplo sencillo con el siguiente código:

/**
 * Remover elementos de un arreglo
 * en JavaScript
 * 
 * @author parzibyte
 * 
 * https://parzibyte.me/blog
 */const canciones = [
 "Crazy",
 "Love is like oxygen",
 "Aladdin sane"
];
console.log("Las canciones antes: ", canciones);

// Remover "Love is like oxygen", índice 1
// (porque los índices comienzan en 0)
canciones.splice(1, 1);

console.log("Las canciones después: ", canciones);
/*
Salida

Las canciones antes:  [ 'Crazy', 'Love is like oxygen', 'Aladdin sane' ]
Las canciones después:  [ 'Crazy', 'Aladdin sane' ]
*/

Estamos eliminando el elemento número 1 del arreglo. Si quisiéramos eliminar el primero, usaríamos el índice 0 y así sucesivamente.

El arreglo es modificado internamente, no lo olvides.

El problema del índice

Ya vimos cómo eliminar un elemento de un arreglo a través del índice o posición, pero en ocasiones no tenemos ese índice.

Si queremos eliminar a partir del valor, simplemente hay que obtener el índice con indexOf o findIndex.

Vamos a ver otro ejemplo:

/**
 * Remover elementos de un arreglo
 * en JavaScript
 * 
 * @author parzibyte
 * 
 * https://parzibyte.me/blog
 */const canciones = [
 "Fox on the run",
 "Start me up",
 "Miss You",
 "Suspicious Minds"
];


console.log("Las canciones antes: ", canciones);

let cancionQueSeElimina = "Fox on the run";
// Buscar su índice
let indice = canciones.indexOf(cancionQueSeElimina);

canciones.splice(indice, 1);

console.log("Las canciones después: ", canciones);
/*
Salida

Las canciones antes:  [ 'Fox on the run',
  'Start me up',
  'Miss You',
  'Suspicious Minds' ]
Las canciones después:  [ 'Start me up', 'Miss You', 'Suspicious Minds' ]
*/

En este caso obtenemos el índice usando la función indexOf, pues fue un arreglo de datos primitivos.

Recuerda que indexOf puede devolver -1 si no encuentra el elemento, deberías hacer esa comprobación antes de llamar a splice.

Eliminar elemento de arreglo con splice y findIndex

Para terminar estos ejemplos de splice en JavaScript vamos a ver cómo eliminar un objeto a partir de una propiedad que tenga.

/**
 * Remover elementos de un arreglo
 * en JavaScript
 * 
 * @author parzibyte
 * 
 * https://parzibyte.me/blog
 */const materias = [
 {
  nombre: "Matemáticas",
  id: 2,
 },
 {
  nombre: "Química III",
  id: 8,
 },
 {
  nombre: "Introducción a la inteligencia artificial",
  id: 1,
 },
];


console.log("Las materias antes: ", materias);

let idDeMateria = 8; // Eliminar Química III
// Buscar su índice
let indice = materias.findIndex(materia => {
 // Se podría hacer en una línea pero mejor ser expresivos
 return materia.id == idDeMateria;
});

materias.splice(indice, 1);

console.log("Las materias después: ", materias);
/*
Salida

Las materias antes:  [ { nombre: 'Matemáticas', id: 2 },
  { nombre: 'Química III', id: 8 },
  { nombre: 'Introducción a la inteligencia artificial', id: 1 } ]
Las materias después:  [ { nombre: 'Matemáticas', id: 2 },
  { nombre: 'Introducción a la inteligencia artificial', id: 1 } ]
*/

Aunque se vea parecido, recordemos que el id no es lo mismo que el índice.

En este caso estamos eliminando del arreglo una materia a partir de su id.

Conclusión

Recuerda: si quieres eliminar más de un elemento a partir de ese índice simplemente cambia el segundo argumento.

También puedes agregar elementos al arreglo en donde el otro fue eliminado, pasando argumentos después del segundo. Por ejemplo:

arr.splice(0,1, "un elemento", "otro elemento", ...)