Remove item from an array of objects by obj property

Learn the easy way to remove an element from an array of objects by object property in JavaScript/Vue.js/ES6.

Suppose you have an array of objects, like the one below:

items: [
  { id: 1, text: "Item 1" },
  { id: 2, text: "Item 2" },
  { id: 3, text: "Item 3" }
]

Your goal is to remove an object from this array that has an id 2. You can do that by using the JavaScript filter() method.

this.items = this.items.filter((obj) => {
  return obj.id !== 2;
})

JavaScript filter() method

JavaScript filter() method creates a new array with the items that pass the condition by the provided function.

Hi, I'm Renat 👋

➜

In the example above we filter out all the objects that have an ID other than 2.

return obj.id !== 2;

Since the filter() method creates a new array, we can replace our existing array with the new one in a single command.

this.items = this.items.filter((obj) => {
  return obj.id !== 2;
})

If you find this post useful, please let me know in the comments below.
Cheers,
Renat Galyamov