How to delete an element from an array using JavaScript ?

The array is a type of data structure that allows us to store similar types of data under a single variable. The array is helpful to create a list of elements of similar types, which can be accessed using their index.

In this article, we will discuss different ways to remove elements from the array. There are many methods that are used to remove elements from the JavaScript array which are discussed below.

Using Array shift() Method

This method is used to delete one or more elements from the array and these elements get deleted from the beginning of the array because of the deleted elements or items from the array, the length of the array also gets decreased by the number of elements deleted from the array.

Below are examples of how to do this: Let’s see how to delete an element at the beginning of the array using the shift() function.

Input:  arr[] = {3, 1, 2, 5, 90}, size = 5, capacity = 5
Output: arr[] = {_, 1, 2, 5, 90}, size = 4, capacity = 5

Example 1: In this example, we use an array to delete elements at the beginning of an array using the shift() function.

const arr = [3, 1, 2, 5, 90];
arr.shift();
console.log(arr);

[ 1, 2, 5, 90 ]

Example 2: In this example, we use an associative array to delete elements at the beginning of an array using the JavaScript array shift() function.

let arr = [
    { key: 'first', val: '3' },
    { key: 'second', val: '1' },
    { key: 'third', val: '2' },
    { key: 'fourth', val: '5' },
    { key: 'fifth', val: '90' }
];
arr.shift();
console.log(arr);

[
  { key: 'second', val: '1' },
  { key: 'third', val: '2' },
  { key: 'fourth', val: '5' },
  { key: 'fifth', val: '90' }
]

Using the JavaScript array pop() Method

This method is used to pop or delete elements or items from an array. We can pop one or more elements from the array and these elements get deleted from the end of the array because of the popped elements from the array, the length of the array also gets decreased by the number of elements popped from the array.

Below are examples of how to do it: Let’s see how to delete an element at the end of the array using the pop() function.

Input:  arr[] = {3, 1, 2, 5, 90}, size = 5, capacity = 5
Output: arr[] = {3, 1, 2, 5, _}, size = 4, capacity = 5

Example 1: In this example, we use an array to delete elements at the end of an array using the JavaScript array pop() function.

let arr = [3, 1, 2, 5, 90];

console.log("Orginal array: " + arr);
console.log("Extracted element: " + arr.pop());
console.log("Remaining elements: " + arr);

Orginal array: 3,1,2,5,90
Extracted element: 90
Remaining elements: 3,1,2,5

Example 2: In this example, we use an associative array to delete elements at the end of an array using the pop() function.

let arr = [
    { key: 'first', val: 3 },
    { key: 'second', val: 1 },
    { key: 'third', val: 2 },
    { key: 'fourth', val: 5 },
    { key: 'fifth', val: 90 }
];

let val = arr.pop();

console.log('key popped: ' + val.key);
console.log('value popped: ' + val.val); 

key popped: fifth
value popped: 90

Using JavaScript splice() Method

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

Example:

function func() {
    let array = ["HTML", "CSS", "JS", "Bootstrap"];
 
    console.log("Original array: " + array);
                 
    // Add 'React' and 'Php' after removing 'JS'.
    let removedElement = array.splice(1, 1, 'PHP', 'React')
                 
    console.log("Array after splice: " + array);
    console.log("Removed element: " + removedElement);                            
}
func();

Original array: HTML,CSS,JS,Bootstrap
Array after splice: HTML,PHP,React,JS,Bootstrap
Removed element: CSS

Using JavaScript Array filter() Method

The JavaScript Array filter() Method is used to create a new array from a given array consisting of only those elements from the given array which satisfy a condition set by the argument method. 

Example:

// Declare and initialize an array
let array = ["algo", "maths", "science", "biology"]
             
// Using filter method to create a remove method
function arrayRemove(arr, value) {
    return arr.filter(function (geeks) {
        return geeks != value;
    });             
}
 
let result = arrayRemove(array, "algo");
console.log("Remaining elements: " + result)

Remaining elements: maths,science,biology

Using the delete Operator

The delete operator can be used to remove an element from an array, but there are a few key differences compared to the methods described above:

• The delete operator removes the element, but does not reindex the array or change its length. Instead, it leaves an empty slot (undefined) in the array.

Example:

let arr = [1, 2, 3, 4, 5];

delete arr[2];

console.log(arr); 
console.log(arr.length); 

[ 1, 2, <1 empty item>, 4, 5 ]
5