Eliminar un elemento de un array con JavaScript

Uno de los métodos más comunes que necesitamos al trabajar con arrays en JavaScript es el de eliminar un elemento. Podemos necesitar hacerlo porque el usuario ha hecho clic en un botón de "eliminar", o porque simplemente necesitamos quitar ese elemento del array para hacer algo más con él. De cualquier forma, vamos a ver cómo podemos eliminar un elemento de un array en JavaScript.

Eliminar un elemento del array usando el método splice()

El método splice() es, sin duda, el más común y útil para eliminar un elemento de un array. Este método nos permite eliminar uno o más elementos de un array, y también nos permite añadir nuevos elementos en su lugar. Vamos a ver un ejemplo de cómo usarlo.

En este ejemplo, tenemos un array de nombres de frutas. Vamos a suponer que el usuario ha hecho clic en un botón para eliminar la primera fruta del array (por ejemplo, si hace clic en un botón "eliminar manzana").

var frutas = ["manzana", "plátano", "kiwi"];

//eliminar la primera fruta (manzana) del array
frutas.splice(0, 1);

console.log(frutas); // ["plátano", "kiwi"]

Como puedes ver, usamos el método splice() para eliminar el primer elemento del array. Este método toma dos argumentos: el índice del elemento que queremos eliminar, y el número de elementos que queremos eliminar a partir de ese índice. En este caso, solo queremos eliminar un elemento, así que solo especificamos un 1 como segundo argumento.

También podríamos haber usado el método splice() para eliminar más de un elemento a la vez. Por ejemplo, si quisieramos eliminar las frutas "plátano" y "kiwi", podríamos hacerlo así:

var frutas = ["manzana", "plátano", "kiwi"];

//eliminar las frutas "plátano" y "kiwi"
frutas.splice(1, 2);

console.log(frutas); // ["manzana"]

Como puedes ver, especificamos el índice de la fruta "plátano" (que es 1) como el primer argumento, y el número de elementos a eliminar como el segundo argumento. En este caso, especificamos un 2, lo que significa que queremos eliminar las frutas "plátano" y "kiwi".

Eliminar un elemento del array usando el método slice()

Otro método que podemos usar para eliminar un elemento de un array es el método slice(). Este método nos permite crear un nuevo array a partir de un array existente, pero con algunos elementos eliminados. Vamos a ver un ejemplo:

var frutas = ["manzana", "plátano", "kiwi"];

//crear un nuevo array sin la primera fruta (manzana)
var nuevasFrutas = frutas.slice(1);

console.log(nuevasFrutas); // ["plátano", "kiwi"]

Como puedes ver, usamos el método slice() para crear un nuevo array a partir del array "frutas". Especificamos el índice de la fruta que queremos eliminar (en este caso, la "manzana" con índice 0) como el primer argumento. Dado que no especificamos un segundo argumento, el método slice() asume que queremos todos los elementos después del índice especificado, por lo que el nuevo array no contiene la fruta "manzana".

También podemos usar el método slice() para eliminar más de un elemento a la vez. Por ejemplo, si quisieramos eliminar las frutas "plátano" y "kiwi", podríamos hacerlo así:

var frutas = ["manzana", "plátano", "kiwi"];

//crear un nuevo array sin las frutas "plátano" y "kiwi"
var nuevasFrutas = frutas.slice(0, -2);

console.log(nuevasFrutas); // ["manzana"]

Como puedes ver, especificamos el índice de la fruta que queremos conservar (en este caso, la "manzana" con índice 0) como el primer argumento, y el número de elementos a conservar como el segundo argumento. En este caso, especificamos un -2, lo que significa que queremos todos los elementos antes de la segunda fruta del array ("plátano").

Eliminar un elemento del array usando el método filter()

Otro método que podemos usar para eliminar un elemento de un array es el método filter(). Este método nos permite crear un nuevo array a partir de un array existente, pero solo con los elementos que cumplan una determinada condición. Vamos a ver un ejemplo:

var frutas = ["manzana", "plátano", "kiwi"];

//crear un nuevo array con las frutas que no sean "manzanas"
var nuevasFrutas = frutas.filter(function(fruta) {
  return fruta !== "manzana";
});

console.log(nuevasFrutas); // ["plátano", "kiwi"]

Como puedes ver, usamos el método filter() para crear un nuevo array a partir del array "frutas". Pasamos como argumento una función que recibe cada elemento del array como argumento, y devuelve true o false en función de si queremos conservar ese elemento en el nuevo array. En este caso, estamos usando una función que devuelve true si el elemento no es una "manzana".

También podemos usar el método filter() para eliminar más de un elemento a la vez. Por ejemplo, si quisieramos eliminar las frutas "plátano" y "kiwi", podríamos hacerlo así:

var frutas = ["manzana", "plátano", "kiwi"];

//crear un nuevo array con las frutas que no sean "plátanos" ni "kiwis"
var nuevasFrutas = frutas.filter(function(fruta) {
  return fruta !== "plátano" && fruta !== "kiwi";
});

console.log(nuevasFrutas); // ["manzana"]

Como puedes ver, estamos usando una función que devuelve true si el elemento no es una "plátano" ni un "kiwi". De esta forma, el nuevo array solo contiene la "manzana".

Eliminar un elemento del array usando el método forEach()

Otro método que podemos usar para eliminar un elemento de un array es el método forEach(). Este método nos permite iterar sobre todos los elementos de un array, y hacer algo con ellos. Vamos a ver un ejemplo:

var frutas = ["manzana", "plátano", "kiwi"];

//eliminar la primera fruta (manzana) del array
frutas.forEach(function(fruta, index) {
  if (index === 0) {
    frutas.splice(index, 1);
  }
});

console.log(frutas); // ["plátano", "kiwi"]

Como puedes ver, usamos el método forEach() para iterar sobre todos los elementos del array "frutas". En la función que le pasamos como argumento, recibimos cada elemento y su índice como argumentos. En este caso, usamos el índice para comprobar si el elemento es el primer elemento del array, y en ese caso lo eliminamos usando el método splice().

También podemos usar el método forEach() para eliminar más de un elemento a la vez. Por ejemplo, si quisieramos eliminar las frutas "plátano" y "kiwi", podríamos hacerlo así:

var frutas = ["manzana", "plátano", "kiwi"];

//eliminar las frutas "plátano" y "kiwi"
frutas.forEach(function(fruta, index) {
  if (fruta === "plátano" || fruta === "kiwi") {
    frutas.splice(index, 1);
  }
});

console.log(frutas); // ["manzana"]

Como puedes ver, estamos usando la función para comprobar si el elemento es un "plátano" o un "kiwi", y en ese caso lo eliminamos usando el método splice().

Eliminar un elemento del array usando el método pop()

El método pop() es un método que se usa mucho para eliminar un elemento de un array, aunque en realidad no es un método específico para eso. El método pop() nos permite eliminar el último elemento de un array, y devolver ese elemento. Por ejemplo:

var frutas = ["manzana", "plátano", "kiwi"];

//eliminar el último elemento del array (kiwi)
var kiwi = frutas.pop();

console.log(kiwi); // "kiwi"
console.log(frutas); // ["manzana", "plátano"]

Como puedes ver, usamos el método pop() para eliminar el último elemento del array. El método pop() devuelve ese elemento, por lo que podemos almacenarlo en una variable para usarlo después. En este caso, hemos almacenado el elemento en la variable "kiwi".

Eliminar un elemento del array usando el método shift()

El método shift() es similar al método pop(), pero en lugar de eliminar el último elemento del array, lo que hace es eliminar el primer elemento. Por ejemplo:

var frutas = ["manzana", "plátano", "kiwi"];

//eliminar el primer elemento del array (manzana)
var manzana = frutas.shift();

console.log(manzana); // "manzana"
console.log(frutas); // ["plátano", "kiwi"]

Como puedes ver, usamos el método shift() para eliminar el primer elemento del array. El método shift() devuelve ese elemento, por lo que podemos almacenarlo en una variable para usarlo después. En este caso, hemos almacenado el elemento en la variable "manzana".

Eliminar un elemento del array usando el operador delete

Otra forma de eliminar un elemento de un array es usar el operador delete. Este operador nos permite eliminar un elemento de un array, pero a diferencia de los métodos anteriores, el elemento eliminado no se devuelve. Por ejemplo:

var frutas = ["manzana", "plátano", "kiwi"];
//eliminar el primer elemento del array (manzana)

delete frutas[0];
console.log(frutas); // [undefined, "plátano", "kiwi"]