How to remove an item from an array in JavaScript

1indexOf + splice (in place)Recommended

splice(start, deleteCount) removes deleteCount elements starting at start, shifts everything after them left, and returns the removed elements as an array. Pair it with indexOf, which returns the index of the first === match or -1, and you remove one item by value. If you already have the index, skip indexOf and call arr.splice(i, 1) directly.

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

// Find the first match, then remove 1 element at that index
const i = fruits.indexOf('banana');
if (i !== -1) {
  const removed = fruits.splice(i, 1); // splice returns what it removed
  console.log(removed);
}
console.log(fruits);

// Skip the guard and a missing value removes the LAST item:
// indexOf returns -1, and splice(-1, 1) counts from the end
const j = fruits.indexOf('mango');
fruits.splice(j, 1);
console.log(j, fruits);

Prints [ 'banana' ], then [ 'apple', 'cherry', 'date' ], then -1 [ 'apple', 'cherry' ]. That last line is the bug hiding in the most copied answer on the internet: a negative start counts back from the end, so an unguarded splice(-1, 1) silently deletes date. Keep the i !== -1 check. indexOf also removes only the first match and cannot find NaN; for either case use filter (section 3) or findIndex with a predicate.

2toSpliced() (a new array, ES2023)

toSpliced takes the same arguments as splice but returns a copy with the change applied and never touches the original. It is the right tool for React or Redux state, function arguments you don't own, and any data another part of the program still holds a reference to. It has been in every engine since 2023; the older equivalent spreads two slices around the index.

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

const i = fruits.indexOf('banana');
const without = i === -1 ? fruits : fruits.toSpliced(i, 1);

console.log(without);
console.log(fruits); // the original is untouched

// Before ES2023: copy the two halves around the index
const viaSlice = [...fruits.slice(0, i), ...fruits.slice(i + 1)];
console.log(viaSlice);

Prints [ 'apple', 'cherry', 'date' ], then the untouched original [ 'apple', 'banana', 'cherry', 'date' ], then the same three-item result from the slice version. The -1 guard is still needed: toSpliced(-1, 1) counts from the end exactly like splice. Unlike splice, it returns the new array, not the removed items.

3filter() (every match, or by condition)

filter keeps every element its callback returns true for and builds a new array from them. That makes it the answer to two neighbouring questions: remove all occurrences of a value, and remove items that match a condition, such as an object with a given id. Objects are compared by reference, so indexOf can't find { id: 2 }; a predicate can.

// Remove EVERY occurrence of a value
const tags = ['js', 'css', 'js', 'html', 'js'];
console.log(tags.filter((tag) => tag !== 'js'));

// Remove by a condition: objects are matched by a property, not by ===
const users = [
  { id: 1, name: 'Ada' },
  { id: 2, name: 'Linus' },
  { id: 3, name: 'Grace' },
];
const remaining = users.filter((user) => user.id !== 2);
console.log(remaining);
console.log(users.length); // filter never touches the original

Prints [ 'css', 'html' ], then [ { id: 1, name: 'Ada' }, { id: 3, name: 'Grace' } ], then 3. Mind the direction of the test: filter takes a keep condition, so "remove id 2" is written user.id !== 2. It always walks the whole array, which is O(n) and fine for almost everything; if you need the original array itself to shrink (other code holds a reference to it), reassign the result or use the backwards loop in section 6.

4Which should you use?

5delete vs splice

delete is an object operator: it removes a property. Array indexes are properties, so delete arr[1] runs without complaint, but it removes only the value and leaves the slot empty. Nothing shifts and length stays the same. The result is a sparse array, which iteration methods treat inconsistently.

const letters = ['a', 'b', 'c'];
delete letters[1];

console.log(letters);
console.log(letters.length);
console.log(letters[1], 1 in letters);
letters.forEach((letter, i) => console.log(i, letter)); // skips the hole

const fixed = ['a', 'b', 'c'];
fixed.splice(1, 1);
console.log(fixed, fixed.length);

After delete, Node prints [ 'a', <1 empty item>, 'c' ] with a length of 3. Reading the hole gives undefined, but 1 in letters is false, and forEach skips it entirely (0 a, 2 c), while a for loop or for...of would visit it as undefined. splice gives the array you actually wanted: [ 'a', 'c' ] 2. Use delete on object properties, never on array elements.

6Removing items inside a loop

Splicing while you walk forward is the classic way to miss elements. Every removal shifts the rest of the array one place left, so the element after the one you removed lands on the current index, and the loop's i++ steps right past it. Two neighbouring matches are enough to trigger it.

const nums = [1, 2, 2, 3, 2, 4];

// Buggy: after a splice the next element slides into index i,
// then i++ steps right past it
const buggy = [...nums];
for (let i = 0; i < buggy.length; i++) {
  if (buggy[i] === 2) buggy.splice(i, 1);
}
console.log(buggy);

// Fix 1: walk backwards, so a removal only shifts items you've already seen
const backwards = [...nums];
for (let i = backwards.length - 1; i >= 0; i--) {
  if (backwards[i] === 2) backwards.splice(i, 1);
}
console.log(backwards);

// Fix 2: don't loop at all
console.log(nums.filter((n) => n !== 2));

The forward loop prints [ 1, 2, 3, 4 ]: one 2 survived because it slid into the slot the loop had just checked. Walking backwards prints [ 1, 3, 4 ], and so does filter. Prefer filter: each splice is itself an O(n) shift, so removing many items one splice at a time is O(n²), while filter is a single pass. Keep the backwards loop for when the same array object really must shrink in place.