How to remove a specific item from an array in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Removing specific items from JavaScript arrays is crucial when building interactive applications that need to delete selected items, remove tags, or filter out unwanted data based on user actions.
With over 25 years of experience in software development and as the creator of CoreUI, I have implemented this functionality extensively in components like multi-select dropdowns, tag inputs, and data tables where users need to remove specific entries.
From my extensive expertise, the most reliable and efficient solution is combining indexOf() to find the item’s position with splice() to remove it in place.
This approach handles primitive values while maintaining array integrity and is supported across all JavaScript environments.
Use indexOf() to find the item’s index, then splice() to remove it from the array.
const fruits = ['apple', 'banana', 'orange', 'banana']
const index = fruits.indexOf('banana')
if (index > -1) {
fruits.splice(index, 1)
}
// Result: ['apple', 'orange', 'banana']
The indexOf() method searches for the first occurrence of the specified value and returns its index, or -1 if not found. The splice() method then removes one element at that index position. In this example, indexOf('banana') returns 1, and splice(1, 1) removes one element at index 1. The condition if (index > -1) ensures we only attempt removal when the item actually exists in the array. Note that this removes only the first occurrence of the value.
1. Removing a String by Value
The most common scenario is removing a known string value from an array. The indexOf() + splice() combination gives you precise control over which element is removed without affecting the rest of the array.
const colors = ['red', 'green', 'blue', 'yellow']
const removeIndex = colors.indexOf('green')
if (removeIndex > -1) {
colors.splice(removeIndex, 1)
}
console.log(colors)
// Result: ['red', 'blue', 'yellow']
The splice() method modifies the original array and returns an array containing the removed elements. In this case, it returns ['green']. The second argument 1 tells splice() to remove exactly one element. If you pass 2, it would remove two elements starting from that index. Always check that indexOf() did not return -1 before calling splice(), otherwise you would accidentally remove the last element of the array because splice(-1, 1) removes from the end.
2. Removing a Number by Value
The same pattern works for arrays of numbers. Since indexOf() uses strict equality (===), you can be confident that type coercion will not cause unexpected matches.
const scores = [85, 92, 78, 95, 88]
const targetScore = 78
const scoreIndex = scores.indexOf(targetScore)
if (scoreIndex > -1) {
const removed = scores.splice(scoreIndex, 1)
console.log('Removed:', removed[0])
// Result: Removed: 78
}
console.log(scores)
// Result: [85, 92, 95, 88]
The return value of splice() is useful when you need to confirm what was removed or log the operation. In CoreUI data table components, we use this return value to display undo notifications after a user deletes a row, allowing them to restore the removed item if the action was accidental.
3. Removing Only the First Occurrence
When an array contains duplicate values, indexOf() always returns the index of the first match. This means the splice() call removes only that first occurrence, leaving any subsequent duplicates intact.
const tags = ['urgent', 'review', 'urgent', 'approved', 'urgent']
const firstUrgent = tags.indexOf('urgent')
if (firstUrgent > -1) {
tags.splice(firstUrgent, 1)
}
console.log(tags)
// Result: ['review', 'urgent', 'approved', 'urgent']
This behavior is intentional and useful when you only want to remove one instance of a duplicated value. For example, in a tag input component, a user might click the close button on one specific tag badge, and you should only remove that single instance rather than all tags with the same label.
4. Removing All Occurrences with a Loop
If you need to remove every instance of a value, you can use a while loop that repeatedly finds and splices until indexOf() returns -1.
const items = ['a', 'b', 'c', 'b', 'd', 'b']
let pos = items.indexOf('b')
while (pos > -1) {
items.splice(pos, 1)
pos = items.indexOf('b')
}
console.log(items)
// Result: ['a', 'c', 'd']
Each iteration removes one occurrence and then searches again from the beginning. Because splice() shifts the remaining elements down, calling indexOf() from the start on each pass ensures no instances are skipped. This approach mutates the original array, which is efficient when you own the array and do not need to preserve the original data.
5. Removing an Object by Property
For arrays of objects, indexOf() does not work because it compares by reference, not by property values. Use findIndex() instead, which accepts a callback function to match objects by a specific property like id.
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
const userIndex = users.findIndex((user) => user.id === 2)
if (userIndex > -1) {
users.splice(userIndex, 1)
}
console.log(users)
// Result: [
// { id: 1, name: 'Alice' },
// { id: 3, name: 'Charlie' }
// ]
The findIndex() method iterates through the array and returns the index of the first element where the callback returns true. This is the standard pattern for removing objects from arrays in CoreUI components like data tables and user management lists, where each row has a unique identifier and the delete action targets a specific record.
6. Wrapping Removal in a Reusable Function
To avoid repeating the indexOf() + splice() pattern throughout your codebase, you can wrap it in a utility function that handles the existence check internally.
function removeItem(array, value) {
const index = array.indexOf(value)
if (index > -1) {
array.splice(index, 1)
}
return array
}
const languages = ['JavaScript', 'TypeScript', 'Python', 'Go']
removeItem(languages, 'Python')
console.log(languages)
// Result: ['JavaScript', 'TypeScript', 'Go']
This function mutates the original array and returns it for convenience. Returning the array allows you to chain the call or use it inline in assignments. By centralizing the removal logic, you reduce the risk of forgetting the -1 check, which is the most common source of bugs when using splice() for item removal.
Best Practice Note:
The splice() method mutates the original array in place. In contexts where immutability is required, such as React or Vue state updates, use filter() to create a new array instead: const updated = fruits.filter((item) => item !== 'banana'). This is the same approach we use in CoreUI components for managing selected items and dynamic lists. For related operations, see how to remove the first item, how to remove the last item, and how to find the index of an element.
