How to Delete a Specific Item from an Array in JavaScript

Removing an item from an array is a common JavaScript task. The right method depends on whether you want to change the existing array or create a new one. Use splice() for an in-place change, filter() to build a copy without matching values, and an identifier such as an object ID when working with arrays of objects.

Remove the first matching value with splice()

indexOf() finds the first matching value. If it exists, pass its index and a delete count of one to splice():

const fruits = ["apple", "banana", "orange", "grape"];

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

console.log(fruits);
// ["apple", "orange", "grape"]

splice(start, deleteCount) changes the original array and returns an array containing the removed elements. The index !== -1 check matters: if no match exists, splice(-1, 1) removes the last element instead.

Remove matching values with filter()

filter() returns a new array containing only the elements that pass its condition. The original array is left unchanged:

const fruits = ["apple", "banana", "orange", "grape"];

const remainingFruits = fruits.filter(
  fruit => fruit !== "banana"
);

console.log(remainingFruits);
// ["apple", "orange", "grape"]
console.log(fruits);
// ["apple", "banana", "orange", "grape"]

This removes every element equal to "banana". For an array such as [1, 2, 3, 2, 4, 2], filtering with number => number !== 2 returns [1, 3, 4]. Use filter() when you want to remove all matches or preserve the original array.

Remove an object by its ID

Objects are compared by reference, not by their property values. To remove an object based on its data, compare a stable property such as its unique ID:

const users = [
  { id: 1, name: "John" },
  { id: 2, name: "Mike" },
  { id: 3, name: "David" }
];

const remainingUsers = users.filter(user => user.id !== 2);

console.log(remainingUsers);
// [{ id: 1, name: "John" }, { id: 3, name: "David" }]

This returns a new array without any user whose ID is 2. If you have the exact same object reference and need to remove only that reference, indexOf(targetUser) or findIndex(user => user === targetUser) can locate it, but comparing IDs is usually more appropriate when objects may have been reconstructed.

Use findIndex() when you need to mutate an object array

When the original array must be changed, use findIndex() to locate an object and guard against the “not found” result before calling splice():

const users = [
  { id: 1, name: "John" },
  { id: 2, name: "Mike" },
  { id: 3, name: "David" }
];

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

console.log(users);
// [{ id: 1, name: "John" }, { id: 3, name: "David" }]

This removes only the first matching object. If IDs are not unique and all matches should be removed, use filter() instead.

Remove an item when its index is known

If you already have the array position, call splice() directly:

const colors = ["red", "green", "blue"];
colors.splice(1, 1);

console.log(colors);
// ["red", "blue"]

Array indexes start at zero, so index 1 refers to "green". Check that an index is valid before using one that came from another source.

Real-world patterns

Filtering is convenient when a condition determines which items remain:

// Remove completed tasks
const openTasks = tasks.filter(task => !task.completed);

// Keep only active users
const activeUsers = users.filter(user => user.active);

// Keep the first occurrence of each value
const uniqueValues = values.filter(
  (value, index) => values.indexOf(value) === index
);

For large arrays, the last pattern can be slower because indexOf() searches the array for each value. When appropriate, [...new Set(values)] is a simpler way to deduplicate primitive values while preserving first-seen order.

Update array state in React

Do not mutate an array stored in React state with splice(). Create a new array with filter() and pass it to the state setter:

setItems(items => items.filter(item => item.id !== id));

The functional update uses the latest state value and the new array lets React detect the update reliably.

Which method should you choose?

• Use splice() when you intentionally want to mutate an array and have a valid index.
• Use filter() when you want a new array, especially when removing all values that match a condition.
• Use findIndex() plus a -1 check when you need to locate and mutate the first matching object.
• For objects, compare stable identifiers such as IDs rather than assuming two object values are equal by content.
• For React state and other immutable workflows, create a new array instead of mutating the existing one.