Remove element from array JavaScript [SOLVED]

This tutorial explains 7 typical ways to remove element from array JavaScript. These are array methods, loops, custom functions, and the delete keyword.

Let's start by setting up a lab environment.

 

Setup Lab environment

Assume we have an array of 10 names.

Array

let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']

The goal is to remove the names one at a time with a different method till the entire array is empty.

Let's create the project directory and the script file then open the project with a preferred code editor.

mkdir removeElement && cd removeElement
touch main.js
code .

We create the project directory removeElement on an Ubuntu terminal, script index.js file, and open the project in Visual Studio Code.

Now we can dive into the ways to remove element from array JavaScript.

 

Different methods to remove elements from Array in JavaScript

Method-1: Using pop()

The most common way to remove element from array JavaScript is to use the pop() array method.

pop() removes the last element of the array. It takes no parameter and returns the removed element.

Let's use the method to remove the last name from the names array.

Input

let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']
console.log("Before pop()", names);
names.pop() // !Jane
console.log("After pop()", names) 

Output

Before pop() [
  'Lorem', 'Ipsum',
  'Doe',   'Reh',
  'Mih',   'Fah',
  'Soh',   'Lah',
  'Tido',  'Jane'
]
After pop() [
  'Lorem', 'Ipsum',
  'Doe',   'Reh',
  'Mih',   'Fah',
  'Soh',   'Lah',
  'Tido'
]

Before running the pop method, we had 'Jane' in the array. Afterward, it does not exist.

 

Method-2: Using shift()

shift() method does the opposite of pop(). Instead of removing an element from the end of an array, it deletes it from the start of an array.

Let's use the method to remove the first element, 'Lorem'.

Input

let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']

// No. 1: pop()
names.pop() // !Jane
console.log(names) 

// No. 2: shift()
names.shift() // !Lorem
console.log(names) 

Output

[
  'Lorem', 'Ipsum',
  'Doe',   'Reh',
  'Mih',   'Fah',
  'Soh',   'Lah',
  'Tido'
]
[
  'Ipsum', 'Doe',
  'Reh',   'Mih',
  'Fah',   'Soh',
  'Lah',   'Tido'
]

The array length is now 8. And 'Lorem' is unavailable in the names array.

 

Method-3: Using splice()

The splice() method replaces a specified number of elements starting from a particular array index. Failure to specify the corresponding replacer values means replacing the values with nothing, which equates to removing the elements from the array.

<array>.splice(<start>, <deleteCount>)

start is the index to begin the deletion. Failure to specify the deleteCount results in removing elements from the starting index to the end of the array. Likewise, specifying a deleteCount of a value higher than the array's length removes all the subsequent elements.

Let's use the method to remove 'Ipsum' from the list.

names.splice(0, 1) // !Ipsum
console.log(names) 

We delete one element from the array's first index (0). If you are unsure about the index of the target element, use the indexOf() method to locate it.

const start = names.indexOf('Ipsum')
names.splice(start, 1) 

Input

let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']

// No. 1: pop()
names.pop() // !Jane

// No. 2: shift()
names.shift() // !Lorem
console.log(names) 

// No. 3: splice
names.splice(0, 1) // !Ipsum
console.log(names) 

Output

[
  'Ipsum', 'Doe',
  'Reh',   'Mih',
  'Fah',   'Soh',
  'Lah',   'Tido'
]
[
  'Doe',  'Reh',
  'Mih',  'Fah',
  'Soh',  'Lah',
  'Tido'
]

 

Method-4: Using loop

We can remove an element from an array using a custom function and a loop with specific conditions. Here is an example.

Input

let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']

// No. 1: pop()
names.pop() // !Jane

// No. 2: shift()
names.shift() // !Lorem

// No. 3: splice
names.splice(0, 1) // !Ipsum
console.log(names) 

const updatedArray = (array) => {
    
    let updated = []

    for (let element of array) {
        if(element !== 'Doe') 
        updated.push(element)
    }
    
    return updated
}
names = updatedArray(names) // !Doe
console.log(names) 

The updatedArray() function receives the names array. It then creates updated array. Using a for-of loop, the function pushes the names array's elements into the updated array except 'Doe'.

Lastly, the function returns the new array.

Output

[
  'Doe',  'Reh',
  'Mih',  'Fah',
  'Soh',  'Lah',
  'Tido'
]
[ 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido' ]

The array length is now 6. And 'Doe' is unavailable in the updated list of names.

 

Method-5: Using delete

The delete keyword removes an object element. We can also use it to delete an array's element.

The main drawback of this way to remove element from array JavaScript is that it deletes the element and the index but retains the space. That is why you could see the following value occupying the previous element's space.

<1 empty item>

Let's remove 'Reh' from the names array using the delete keyword.

Input

let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']

// No. 1: pop()
names.pop() // !Jane

// No. 2: shift()
names.shift() // !Lorem

// No. 3: splice
names.splice(0, 1) // !Ipsum

// No. 4: Custom function and for-of loop
const updatedArray = (array) => {
    
    let updated = []

    for (let element of array) {
        if(element !== 'Doe') 
        updated.push(element)
    }
    
    return updated
}
names = updatedArray(names) // !Doe
console.log(names) 

// No. 5: delete
delete names[0] // !Reh
console.log(names)

Output

[ 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido' ]
[ <1 empty item>, 'Mih', 'Fah', 'Soh', 'Lah', 'Tido' ]

 

Method-6: Using filter()

filter() is a higher-order array method that returns a new array of elements that satisfy a condition.

For example, we can remove 'Mih' from the array using the following condition.

names = names.filter(name => name != 'Mih')  // !Mih

The filter() method receives a callback function that loops through the array and returns all elements except 'Mih'. We then replace the original array with the filtered array.

Besides, the filter() method lets us easily customize it to remove multiple elements from the array. For instance, we can use it to remove 'Fah', 'Lah', and 'Tido' from the array.

let unwanted = ['Lah', 'Fah', 'Tido'] // !Fah, !Lah, !Tido
names = names.filter( name => !unwanted.includes(name) )

We store the 3 elements in a temporary array called unwanted. Using the includes() method, we retain all the elements unavailable in the temporary array. The negation (!) implies the opposite of includes: excludes.

Input

let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']

// No. 1: pop()
names.pop() // !Jane

// No. 2: shift()
names.shift() // !Lorem

// No. 3: splice
names.splice(0, 1) // !Ipsum

// No. 4: Custom function and for-of loop
const updatedArray = (array) => {
    
    let updated = []

    for (let element of array) {
        if(element !== 'Doe') 
        updated.push(element)
    }
    
    return updated
}
names = updatedArray(names) // !Doe

// No. 5: delete
delete names[0] // !Reh
console.log(names) 

// No. 6: filter
    // remove one element
    names = names.filter(name => name != 'Mih')  // !Mih
    console.log(names)
    // remove many elements
    let unwanted = ['Lah', 'Fah', 'Tido'] // !Fah, !Lah, !Tido
    names = names.filter( name => !unwanted.includes(name) )
    console.log(names)

Output

[ <1 empty item>, 'Mih', 'Fah', 'Soh', 'Lah', 'Tido' ]
[ 'Fah', 'Soh', 'Lah', 'Tido' ]
[ 'Soh' ]

We got rid of 'Mih' before removing the 3 elements of the unwanted array.

 

Method-7: Using reset

Lastly, we can remove all array elements by resetting it to a falsy value.

Input

let names = ['Lorem', 'Ipsum', 'Doe', 'Reh', 'Mih', 'Fah', 'Soh', 'Lah', 'Tido', 'Jane']

// No. 1: pop()
names.pop() // !Jane

// No. 2: shift()
names.shift() // !Lorem

// No. 3: splice
names.splice(0, 1) // !Ipsum

// No. 4: Custom function and for-of loop
const updatedArray = (array) => {
    
    let updated = []

    for (let element of array) {
        if(element !== 'Doe') 
        updated.push(element)
    }
    
    return updated
}
names = updatedArray(names) // !Doe

// No. 5: delete
delete names[0] // !Reh

// No. 6: filter
    // remove one element
    names = names.filter(name => name != 'Mih')  // !Mih
    // remove many elements
    let unwanted = ['Lah', 'Fah', 'Tido'] // !Fah, !Lah, !Tido
    names = names.filter( name => !unwanted.includes(name) )
    console.log(names)

// No. 7: reset
names = []
console.log(names)

Output

[ 'Soh' ]
[]

We get an empty array.

 

Conclusion

The 7 typical methods to remove element from array JavaScript are

1. pop() method
2. shift() method
3. splice() method
4. Custom function and a for-of loop
5. delete keyword
6. filter() method
7. reset the array

 

Further Reading

javascript - How can I remove a specific item from an array?