Removing a single element
There are 2 methods that mutate the original array, and return the element that was removed: pop() and shift().
This is how you can remove an item from the end of an array:
const fruits = ['banana', 'pear', 'apple']
fruits.pop() //apple
fruits //[ 'banana', 'pear' ]
From the beginning of an array:
const fruits = ['banana', 'pear', 'apple']
fruits.shift() //banana
fruits //[ 'pear', 'apple' ]
To remove elements at a random position in the middle of the array, you can use splice() (not to be confused with slice()):
a.splice(0, 2) // get the first 2 items
a.splice(3, 2) // get the 2 items starting from index 3
All the method that follow do not mutate the original array, and instead create a new one.
Except splice(), which mutates the original array.
Remove an item you know its index
Suppose you have an array, and you want to remove an item in position i.
One method is to use slice():
const items = ['a', 'b', 'c', 'd', 'e', 'f']
const i = 3
const filteredItems = items.slice(0, i-1).concat(items.slice(i, items.length))
// ["a", "b", "d", "e", "f"]
slice() creates a new array with the indexes it receives. We create a new array, from start to the index we want to remove, and concatenate another array from the first position following the one we removed to the end of the array.
Remove an item you know its value
In this case, one good option is to use filter(), which offers a more declarative approach:
const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(item => item !== valueToRemove)
// ["a", "b", "d", "e", "f"]
This uses the ES6 arrow functions. You can use the traditional functions to support older browsers:
const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valueToRemove = 'c'
const filteredItems = items.filter(function(item) {
return item !== valueToRemove
})
// ["a", "b", "d", "e", "f"]
or you can use Babel and transpile the ES6 code back to ES5 to make it more digestible to old browsers, yet write modern JavaScript in your code.
Removing multiple items
What if instead of a single item, you want to remove many items?
Removing all elements
First let’s see how to remove all elements from an array. You can set its length to 0:
const list = ['a', 'b', 'c']
list.length = 0
Another method changes the original array reference, assigning an empty array to the original variable, so it requires using let instead of const:
let list = ['a', 'b', 'c']
list = []
Remove multiple items by index
You can just create a function and remove items in series:
const items = ['a', 'b', 'c', 'd', 'e', 'f']
const removeItem = (items, i) =>
items.slice(0, i-1).concat(items.slice(i, items.length))
let filteredItems = removeItem(items, 3)
filteredItems = removeItem(filteredItems, 5)
//["a", "b", "d", "e"]
Remove multiple items by value
You can search for inclusion inside the callback function:
const items = ['a', 'b', 'c', 'd', 'e', 'f']
const valuesToRemove = ['c', 'd']
const filteredItems = items.filter(item => !valuesToRemove.includes(item))
// ["a", "b", "e", "f"]