How to remove item from array using javascript?

Sometimes we need to an delete element or remove an item from an array while working on client-side actions to perform or calculations to achieve.

Here are some of the tricks I have found here while working on the same kind of situation once.  First, we will see some of the general cases for this situation to use.

1.1. Removing Array element by value using .splice()

If you know the value you want to remove from an array you can use the splice method. First, you must identify the index of the target item. You then use the index as the start element and remove just one element.
// With a 'for' loop

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
for( let i = 0; i < arr.length; i++){
  if ( arr[i] === 5) {
    arr.splice(i, 1);
  }
} 

// => [1, 2, 3, 4, 6, 7, 8, 9, 0]

// With the .indexOf() method


const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
const i = arr.indexOf(5);
arr.splice(i, 1); 

// => [1, 2, 3, 4, 6, 7, 8, 9, 0]

1.2. Removing Array element using the .filter() method

The specific element can be filtered out from the array, by providing a filtering function. Such function is then called for every element in the array.

const value = 3
let arr = [1, 2, 3, 4, 5, 3]
arr = arr.filter(item => item !== value)
console.log(arr)

// [ 1, 2, 4, 5 ]

1.3. Removing Array element by extending Array.prototype

The prototype of Array can be extended with additional methods. Such methods will be then available to use on created arrays.

Note: Extending prototypes of objects from the standard library of JavaScript (like Array) is considered by some as an antipattern.

// In-place, removes all, by value implementation

Array.prototype.remove = function(item) {
    for (let i = 0; i < this.length; i++) {
        if (this[i] === item) {
            this.splice(i, 1);
        }
    }
}
const arr1 = [1,2,3,1];
arr1.remove(1) 

// arr1 equals [2,3]

// Non-stationary, removes first, by value implementation

Array.prototype.remove = function(item) {
    const arr = this.slice();
    for (let i = 0; i < this.length; i++) {
        if (arr[i] === item) {
            arr.splice(i, 1);
            return arr;
        }
    }
    return arr;
}
let arr2 = [1,2,3,1];
arr2 = arr2.remove(1) 

// arr2 equals [2,3,1]

1.4. Removing Array element using the delete operator

Using the delete operator does not affect the length property. Nor does it affect the indexes of subsequent elements. The array becomes sparse, which is a fancy way of saying the deleted item is not removed but becomes undefined.

const arr = [1, 2, 3, 4, 5, 6];
delete arr[4]; // Delete element with index 4
console.log( arr ); 

// [1, 2, 3, 4, undefined, 6]

The delete operator is designed to remove properties from JavaScript objects, which arrays are objects.

1.5. Removing Array element using Object utilities (>= ES10)

ES10 introduced Object.fromEntries, which can be used to create the desired Array from any Array-like object and filter unwanted elements during the process.

const object = [1,2,3,4];
const valueToRemove = 3;
const arr = Object.values(Object.fromEntries(
  Object.entries(object)
  .filter(([ key, val ]) => val !== valueToRemove)
));
console.log(arr); 

// [1,2,4]

2. Special cases

2.1 Removing element if it’s at the end of the Array

2.1.1. Changing Array length

JavaScript Array elements can be removed from the end of an array by setting the length property to a value less than the current value. Any element whose index is greater than or equal to the new length will be removed.

const arr = [1, 2, 3, 4, 5, 6];
arr.length = 5; // Set length to remove element
console.log( arr ); 

// [1, 2, 3, 4, 5]

2.1.2. Using .pop() method

The pop method removes the last element of the array and updates the length of the array.

const arr = [1, 2, 3, 4, 5, 6];
arr.pop(); // returns 6
console.log( arr ); 

// [1, 2, 3, 4, 5]

2.2. Removing element if it’s at the beginning of the Array

The .shift() method works much like the pop method except it removes the first element of a JavaScript array instead of the last.

const arr = [1, 2, 3, 4];
arr.shift(); // returns 1
console.log( arr ); 

// [2, 3, 4]

2.3. Removing element if it’s the only element in the Array

The fastest technique is to set an array variable to an empty array.

let arr = [1];
arr = []; 

//empty array

Alternatively technique from 2.1.1 can be used by setting length to 0.

You can get more details about this topic from here.
To get to know more about other JQuery topics, you can check these articles too.

Please follow and like us: