Javascript: Remove a specific element from an array

In this blog post, we are going to take a look at some of the widely used, battle tested methods to remove a specific element from an array in Javascript.

01. The splice() method

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. From MDN Docs.

Syntax

Array.splice(begin_removal_at_this_index, number_of_elements_to_remove)

Return Value

An array containing the deleted elements.

Usage

1. Remove by Index

var testArr = [1, 2, 3, 4, 5];
const output = testArr.splice(2, 1);
console.log(output); // Outputs [3]
console.log(testArr); // Outputs [1, 2, 4, 5]

2. Remove by Value

var testArr = [1, 2, 3, 4, 5];
const val = 3; // Value to remove

for (let i = 0; i < testArr.length; i++) {
    if (testArr[i] === val) {
        const removedElements = testArr.splice(i, 1);
        console.log(removedElements); // Outputs [3]
        i--; // Since the indexes of elements following this index get updated after removal
    }
}

console.log(testArr); // Outputs [1, 2, 4, 5]

---

02. The filter() method

The filter() method creates a new array with all elements that pass the test implemented by the provided function. It does not mutate the existing array in place. From MDN Docs.

Syntax

Array.filter(callback(value, index, array) { // Boolean expression });

Return Value

A new array with the elements that pass the test. If no elements pass the test, an empty array will be returned.

Usage

var testArr = [1, 2, 3, 4, 5];
const filterVal = 3; // Value to remove

const filteredElements = testArr.filter(val => (val != filterVal));
console.log(testArr); // Outputs [1, 2, 3, 4, 5]
console.log(filteredElements); // Outputs [1, 2, 4, 5]

---

03. Using Lodash ._remove() method

Lodash is a popular Javascript utility library. You need to install and import it to use this solution.

The _.remove() method removes all elements from array that predicate returns truthy for by manipulating the original array in place. From Lodash Docs.

Syntax

_.remove(array, function(n) {
    return // A boolean expression;
});

Return Value

It returns an array of the removed elements.

Usage

var testArr = [1, 2, 3, 4, 5];
const filterVal = 3; // Value to remove

const filteredElements = _.remove(testArr, function(elem) {
    return elem === filterVal;
});
console.log(filteredElements); // Outputs [3]
console.log(testArr); // Outputs [1, 2, 4, 5]

---

04. Adding a native remove() method to Array.prototype using the splice() method

To better understand this approach. There should be some familiarity with Javascript Object Prototypes. However, you may simply proceed with the solution.

Usage

Array.prototype.remove = function (index) {
    this.splice(index, 1);
};

var testArr = [1, 2, 3, 4, 5];
testArr.remove(2); // This will remove 3
console.log(testArr); // Outputs [1, 2, 4, 5]

It is advised to name the custom methods being added to the object prototypes cautiously, since some external libraries may try to manipulate the object prototype their own way and may conflict with the names of methods added by the user.

---

Cover Photo By Brett Jordan on Unsplash