4 Ways to Remove Element from an Array in JavaScript

In this article, you will discover how to remove an element from an array in JavaScript.

Remove element from an array by its index

In JavaScript, you can delete an element from an array using its index. To do so, you can use the built-in Splice method.

In the example below, you want to remove the blue color at index 2. In that case, we will use the two first parameters of the Splice method. The first is the start position, while the second is the number of elements to delete (index 2 and 1 element to delete in our case).

const colors = ['red', 'green', 'blue', 'yellow']
colors.splice(2, 1)

console.log(colors)
// Output: ['red', 'green', 'yellow']

You can follow the same example if you want to delete an object from an array using its index. The only difference is that your array will be an array of objects. Since you're using the index to delete an element, it will work whatever the element is.

The Splice method is also helpful if you want to replace an element in a JavaScript array.

Note: Take care when using the Splice method because it mutates the original array.

Remove element from an array by its value

If you want to delete an element from an array in JavaScript, you can do it by using its value.

Let's say that you have an array of colors and you want to delete the green color.
You can use the built-in JavaScript filter method to keep only the values that are not equal to "green".

const colors = ['red', 'green', 'blue', 'yellow']
const filteredColors = colors.filter((color) => color !== 'green')

console.log(filteredColors)
// Output: ['red', 'blue', 'yellow']

Remove object from an array by its value

The filter method works the same way with objects. For example, if you want to delete each person with the name "Bob" in an array, you can do as below.

const persons = [
  {
    id: 1,
    name: 'Roger',
  },
  {
    id: 2,
    name: 'Romane',
  },
  {
    id: 3,
    name: 'Bob',
  },
]

const filteredPersons = persons.filter((person) => person.name !== 'Bob')

console.log(filteredPersons)
// Output:
// [
//   { id: 1, name: 'Roger' },
//   { id: 2, name: 'Romane' }
// ]

If you want to learn more about how to filter an array with JavaScript, here is my other article about it.

Remove the first element from an array

If you only want to delete the first element from an array, you can use the previous ways. But, there is one faster using the array Shift method.

const colors = ['red', 'green', 'blue', 'yellow']

colors.shift()

console.log(colors)
// Output: ['green', 'blue', 'yellow']

You can also use the Shift method remove the first character from a string.

Note: Take care when using the Shift method because it mutates the original array.

Remove the last element from an array

If you only want to delete the first element from an array, there is another way using the array Pop method.

const colors = ['red', 'green', 'blue', 'yellow']

colors.pop()

console.log(colors)
// Output: ['red', 'green', 'blue']

The Pop method is also helpful if you want remove the last character from a string.

Note: Take care when using the Pop method because it mutates the original array.

➡️ I help web developers improve their skills 💻 If you want to get more tips and resources about web programming -> Follow me on Twitter 🐦