How can I remove a specific item from an array in JavaScript?

Quick one-time removal

For a one-off removal, fetch the position of the undesired item via indexOf() and then employ splice() to remove it:

const arr = [2, 5, 9];
const index = arr.indexOf(5); // Get its "GPS coordinate"
if (index > -1) arr.splice(index, 1); // [2, 9] => 5 has left the chat


Mass removal: Return of the filter

If you're faced with multiple unwanted duplicates, a mass purge can be performed by cycling through the array using filter():

const duplicateArray = [2, 5, 9, 5, 5];
const purifiedArray = duplicateArray.filter(num => num !== 5); // [2, 9] => 5 has been voted off the island


Soldiering down the array: Reverse loop

In cases where the order matters, set up a reverse iterative loop to ensure accurate index accounting:

function reverseIterationRemoval(arr, val) {
  for (let i = arr.length - 1; i >= 0; i--) {
    if (arr[i] === val) arr.splice(i, 1); // If it quacks like a val, remove it!
  }
  return arr;
}
// Usage: reverseIterationRemoval([1,2,5,5,5,3], 5)


For TypeScript enthusiasts: Enforcing type-safety

In TypeScript, type safety is paramount:

function forcefulRemoval<T>(arr: T[], value: T): T[] {
  return arr.filter(item => item !== value); // No room for type rebels!
}


Making a clean copy with filter

The filter() alternative offers a clean removal method producing a fresh array:

const oldArr = ['apple', 'banana', 'banana', 'orange'];
const newArr = oldArr.filter(fruit => fruit !== 'banana'); // Bananas are evicted.


Order of removal: Right to Left

When scrubbing through an array, a reverse loop helps maintain index accuracy:

for (let i = arr.length - 1; i >= 0; i--) {
  // Kick out the unwanted
}


Defenestrating the extremes with pop() and shift()

For removing elements from both ends of an array, pop() and shift() can throw them overboard:

const queue = [1, 2, 3, 4];
const last = queue.pop(); // Evicts '4', queue now [1, 2, 3]
const first = queue.shift(); // Tosses '1', queue becomes [2, 3]


Catching the deviants

Trap and keep the removed item for future reference:

const expelled = array.splice(idx, 1)[0]; // Caught ya!


Big data, bigger problems

Beware, large arrays can sting with performance penalties. Just remember, filter() creates a new offshoot array.

Going in fresh: Cloning arrays

Curating a clone can be as easy as using the spread operator, ...:

const clonedArray = [...original];


Mind the generation gap

includes() and filter() are ES6 kids on the block; older browsers may need polyfills to understand them.

Edge Cases: Mind the exceptions

Safeguard your code from anomalies:

• If the element can't be found, indexOf() will give -1.
• Separating null can demand special handling.
• Multiple removals can make indices jumpy; take caution.

Sparse Arrays: Keep off the grass

Ever thought of using delete array[index] on scattered arrays?

const sparseArray = [1, 2, 3];
delete sparseArray[1]; // Gotcha [1, empty, 3]


It wipes out the value but leaves an unfilled hole in place, the length unchanged.