Find and remove objects in an array based on a key value in JavaScript

Removing twins or triplets (Multiple items with same key)

To eliminate multiple objects with same key but different values, use filter for Doctor Evil and his clones:

let diabolicalPlans = [{author: 'Doctor Evil'}, {author: 'Mini-Me'}, {author: 'Doctor Evil'}];
// Only one 'Doctor Evil' allowed
diabolicalPlans = diabolicalPlans.filter(plan => plan.author !== 'Doctor Evil'); 


Here, all the copycats known as Doctor Evil are marked and removed.

Tackling Nested Objects

Nested objects? No problem! filter() method comes to the rescue with a hidden key:

let spies = [
  { agent: { codeNumber: 1, name: 'James Bond' }},
  { agent: { codeNumber: 2, name: 'Ethan Hunt' }},
  { agent: { codeNumber: 3, name: 'Jason Bourne' }}
];
// Agent 2, your license has been revoked!
spies = spies.filter(spy => spy.agent.codeNumber !== 2); 


So Agent 2 (Ethan Hunt) has been snuffed out.

Doing it the grandfather's way

For those who fancy a turnstile approach, we have old faithful - array loops and the splice() method.

Splicing with a whiff of loops

let items = [{id: 1}, {id: 2}, {id: 3}];
for (let i = 0; i < items.length; i++) {
  if (items[i].id === 2) {
    // Splice the intruder!
    items.splice(i, 1); 
    break; // Remove only one item
  }
}


break is crucial here because we're playing nice and removing just one item.

Embracing findIndex and Spread Operators

An ES6 approach can be achieved with findIndex and the spread operator for an unaltered and condensed removal:

let items = [{id: 1}, {id: 2}, {id: 3}];
const pos = items.findIndex(item => item.id === 2);
// If found, engage removal protocol
if (pos !== -1) {
  // Creating a new array without altering the original. Pure as driven snow! ❄️
  items = [...items.slice(0, pos), ...items.slice(pos + 1)]; 
}


This method only borrows from the original array, mitigating potential unexpected mutations.

Customizing removal functions

Crafting a custom removal function can add flexibility for various key comparisons.

function exterminateByAttr(arr, attr, value) {
  return arr.filter(item => item[attr] !== value);
}

let items = [{id: 1}, {id: 2}, {id: 3}];
// Your id: 2 has been terminated. Hasta la vista, baby! 👋
items = exterminateByAttr(items, 'id', 2);


Crafting a function like this allows dynamic attribute selection for a wide array of applications.

Eeny, meeny, miny, moe ... Choose the most efficient method

While filter is unchanging and expressive, using splice with loops can be more efficient when you plan to exit early or edit the original array. Always keep in mind the tradeoffs between readability, performance, and context suitability.

One or many? How many deletions?

filter is an overachiever and removes all matches. If you need to keep some matches while removing others, a loop with splice and a counter is your friend.