Remove Elements From a JavaScript Array

Here are the various methods to remove elements from a JavaScript Array

Remove elements from Array

1. Using pop() method

The pop() method removes and returns the last element of an array. This function decreases the length of the array by 1 every time the element is removed.

let a = ["Apple", "Banana", "Orange", "Mango"];

// Removing the last element
let pop = a.pop();

console.log("Removed Element: ", pop);
console.log("Updated Array: ", a);

In this Example:

• The pop() method removes the last element from the array ("Mango" in this case) and returns it, modifying the original array.
• The pop() method returns the removed element ("Mango") so you can store or use it as needed. The updated array, without the last element, is then printed.

Note : Please Read JavaScript Array Tutorial for complete understanding of JavaScript Array.

2. Using shift() Method

The shift() method is used to remove and return the first element of the array and reduce the size of the original array by 1. 

let a = ["Apple", "Banana", "Orange", "Mango"];

// Removing the first element
let fEle = a.shift();

console.log("Removed Element: ", fEle);
console.log("Updated Array: ", a);

In this Example:

• splice() can remove existing elements or add new ones at any position within the array.
• It returns an array containing the elements that were removed, allowing you to keep track of what was deleted.

3. Using splice() Method

The splice() method is used to modify the contents of an array by removing the existing elements and/or adding new elements.

let a = ["Apple", "Banana", "Orange", "Mango"];

// Removing the specified element
let rEle = a.splice(1, 1);

console.log("Removed Element: ", rEle);
console.log("Updated Array: ", a);

In this Example:

• The splice() method is used here to remove the element at index 1 (which is "Banana") from the array. The first argument (1) specifies the index, and the second argument (1) indicates that one element should be removed.
• The splice() method returns an array containing the removed element (["Banana"]), which is stored in the rEle variable. The updated array (["Apple", "Orange", "Mango"]) is then printed without the removed element.

4. Using filter() Method

If we need to remove elements based on a condition, the filter() method is best option. It creates a new array with only the elements that meet the condition.

function isPositive(val) {
    return val > 0;
}

let a = [10, 25, 30, -10, 32, -35];
let filtered = a.filter(isPositive);

console.log("Positive Array Elements: ", filtered);

In this Example:

• The filter() method goes through each number in the array a and uses the isPositive() function to check if the number is greater than 0 (positive).
• It then creates a new array, filtered, which only includes the numbers that are positive (10, 25, 30, 32) and ignores the negative ones. The result is then shown in the console.

5. Using Delete Operator

The delete operator returns a boolean value true, if the element or property is removed from the array or object and false, if a function or variable is passed to remove.

let a = ["Apple", "Banana", "Orange", "Mango"];

// Delete Element at Index 2
let deleted = delete a[2];

console.log("Removed Element: ", deleted);
console.log("Updated Array: ", a);

In this Example:

• The delete operator is used to remove the element at index 2 (which is "Orange") from the array a. However, this method only removes the element, leaving a hole (i.e., the index will be undefined).
• The delete operator returns true, but the array still keeps the same length, with a hole where “Orange” was.

6. Using Array Reset

Removing the elements from an array using the manual clear and reset approach either by resetting the length of the array as 0 using the length property or by assigning the array to an empty array([]).

let a1 = ["Apple", "Banana", "Orange", "Mango"];
let a2 = [10, 20, 30, 40, 50];

// After Deleting Each Element of an Array
a1 = [];
a2.length = 0;

console.log("Updated Array1: ", a1);
console.log("Updated Array2: ", a2);

In this Example:

• The array a1 is set to an empty array ([]), which completely clears all the elements from it.
• The length of the array a2 is set to 0, which removes all elements from the array while still keeping the array reference intact.

7. Using for() Loop and New Array

A simple for loop will be run over the array and pushes all elements in the new array except the element that has to be removed.

let rEle = (a, n) => {
    let newA = [];

    for (let i = 0; i < a.length; i++) {
        if (a[i] !== n) {
            newA.push(a[i]);
        }
    }

    return newA;
};

// Driver Code
let a = [10, 20, 30, 40, 50];
let rElement = 20;

let res = rEle(a, rElement);

console.log("Updated Array: ", res);

In this Example:

• The function rEle removes a specific element (n) from the array a. It creates a new array (newA) and adds all elements from a except the element n (in this case, 20).
• After filtering out the specified element, the new array is returned and displayed. The result is logged, showing the updated array without the element 20. The final array is [10, 30, 40, 50].

8. Using lodash _.remove() Method

We can remove the array elements using Lodash library. The lodash _.remove() method is used to remove the element from array. To use the lodash library, you need to install it locally on your system.

// Import Lodash Library
const _ = require('lodash');

// Declare and Initialize an Array
let a = [101, 98, 12, -1, 848];

// Using _.remove() Method to Remove Odd Number
let even= _.remove(a, function(n) {
    return n % 2 == 0;
});

console.log("Remaining Odd Elements: ", a);
console.log("Removed Even Elements: ", even);  

In this Example:

• _.remove() removes even numbers from the array a and returns them in the even array.
• The remaining odd numbers are in the modified a, and the removed even numbers are in the even array.

9. Using forEach() and splice() Methods

This method uses forEach to iterate over the array and indexOf to find the index of the element that needs to be removed. The splice method is then used to remove the element at that index.

// Function to remove specific element from a
function remEt(a, ele) {
    a.forEach((item, index) => {
        if (item === ele) {
            a.splice(index, 1);
        }
    });
    return a;
}

// Declare and Initialize an Array
let a = ["Apple", "Banana", "Orange", "Mango"];

// Remove Specific Item from Array
remEt(a, "Banana");

console.log("Updated Array: ", a);

In this Example:

• The remEt function loops through the array a and removes the specified element ("Banana") using splice() when it matches.
• The updated array is logged, showing that "Banana" has been removed, and the remaining elements are ["Apple", "Orange", "Mango"].