How to remove a specific element from an array in JavaScript?

Find the item's index with indexOf() and remove it with splice(). This changes the original array and removes only the first match.

const fruits = ['apple', 'banana', 'cherry'];

const index = fruits.indexOf('banana');
if (index !== -1) {
  fruits.splice(index, 1);
}

console.log(fruits); // ['apple', 'cherry']

splice(index, 1) means "starting at index, remove one element". It returns an array of the removed elements.

Why the -1 check matters

indexOf() returns -1 when the item isn't in the array, and splice() treats a negative index as counting from the end. Without the check, you silently remove the last element:

const fruits = ['apple', 'banana', 'cherry'];

fruits.splice(fruits.indexOf('mango'), 1);
console.log(fruits); // ['apple', 'banana']

Get a new array with filter()

filter() keeps every element that passes the test and returns a new array. The original stays untouched:

const numbers = [1, 2, 3, 2, 4];
const withoutTwos = numbers.filter((n) => n !== 2);

console.log(withoutTwos); // [1, 3, 4]
console.log(numbers);     // [1, 2, 3, 2, 4]

Note that it removes all matches, not just the first. This is the version I reach for by default, because code that doesn't mutate is easier to follow.

Objects: match by id

indexOf() and !== compare objects by reference, so an object that only looks the same won't match:

const users = [
  { id: 1, name: 'Ada' },
  { id: 2, name: 'Linus' },
  { id: 3, name: 'Grace' },
];

users.indexOf({ id: 2, name: 'Linus' }); // -1

Compare a property instead. Use filter() for a new array, or findIndex() with splice() to change the original:

const remaining = users.filter((user) => user.id !== 2);
// [{ id: 1, name: 'Ada' }, { id: 3, name: 'Grace' }]

const index = users.findIndex((user) => user.id === 2);
if (index !== -1) users.splice(index, 1);

toSpliced(): splice without mutating

toSpliced() (ES2023) takes the same arguments as splice() but returns a copy, so you can remove exactly one element without touching the original:

const fruits = ['apple', 'banana', 'cherry'];
const index = fruits.indexOf('banana');

const next = index === -1 ? fruits : fruits.toSpliced(index, 1);

console.log(next);   // ['apple', 'cherry']
console.log(fruits); // ['apple', 'banana', 'cherry']

It works in current browsers and Node. If you still support older ones, check Can I Use or stick with filter().

React state

Never call splice() on state. React compares the old and new array by reference, and a mutated array is the same array, so the component may not re-render. Return a new array instead:

function removeTodo(id) {
  setTodos((todos) => todos.filter((todo) => todo.id !== id));
}

Don't use delete

delete removes the value but leaves an empty slot, and the length stays the same:

const fruits = ['apple', 'banana', 'cherry'];
delete fruits[1];

console.log(fruits);        // ['apple', <1 empty item>, 'cherry']
console.log(fruits.length); // 3

To remove the first or last item, there are shorter methods: see how to remove the first or last element of an array.