Remove id from object javascript

Using delete:

delete selectedMap[event.target.id];

You're setting the value incorrectly, though. Here's the correct way:

if[event.target == true]{
    var key = event.target.id;   //  obj.id === id];
  arr.splice[objWithIdIndex, 1];

  return arr;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

removeObjectWithId[arr, 2];

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log[arr];

The Array findIndex[] method returns the index of the first element in an array that passes a test specified by a callback function.

const arr = [9, 8, 7, 6, 5];

const index = arr.findIndex[[num] => num === 7];
console.log[index]; // 2

We specify a test that an object in that array will pass only if it has an ID equal to the specified ID. This makes findIndex[] return the index of the object with that ID.

The Array splice[] method changes the contents of an array by removing existing elements while adding new ones simultaneously.

const arr1 = ['a', 'b', 'c'];

// Removing elements
arr1.splice[1, 2];
console.log[arr1]; // [ 'a' ]

// Removing and adding new elements
const arr2 = ['a', 'b', 'c'];
arr2.splice[1, 2, 'd', 'e'];
console.log[arr2]; // [ 'a', 'd', 'e' ]

This method takes three arguments:

1. start – the index at which to start changing the array.
2. deleteCount – the number of elements to remove from start
3. item1, item2, ... – a variable number of elements to add to the array, beginning from start.

We specify a deleteCount of 1 and a start of the target index to make splice[] remove just the object with that index from the array. We didn’t specify any more arguments, so nothing is added to the array.

Avoiding Side Effects

The Array splice[] method mutates the passed array. This introduces a side effect into our removeObjectWithId[] function. To avoid modifying the passed array and create a pure function, make a copy of the array and call splice[] on the copy, instead of the original

function removeObjectWithId[arr, id] {
  // Making a copy with the Array from[] method
  const arrCopy = Array.from[arr];

  const objWithIdIndex = arrCopy.findIndex[[obj] => obj.id === id];
  arrCopy.splice[objWithIdIndex, 1];
  return arrCopy;
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

const newArr = removeObjectWithId[arr, 2];

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log[newArr];

// original not modified
/**
[
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' }
]
 */
console.log[arr];

Tip

Functions that don’t modify external state [i.e., pure functions] tend to be more predictable and easier to reason about. This makes it a good practice to limit the number of side effects in your programs.

2. The Array filter[] Method

We can also remove an element from an array by ID with the filter[] method. We call filter[] on the array, passing a callback that returns true for every element in that array apart from the object with the specified ID.

Example

function removeObjectWithId[arr, id] {
  return arr.filter[[obj] => obj.id !== id];
}

const arr = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' },
];

const newArr = removeObjectWithId[arr, 2];

// [ { id: 1, name: 'John' }, { id: 3, name: 'Peter' } ]
console.log[newArr];

// original not modified
/**
[
  { id: 1, name: 'John' },
  { id: 2, name: 'Kate' },
  { id: 3, name: 'Peter' }
]
 */
console.log[arr];

The Array filter[] method creates a new array filled with elements that pass a test specified by a callback function. It does not modify the original array.

Example

const arr = [1, 2, 3, 4];

const filtered = arr.filter[[num] => num > 2];
console.log[filtered]; // [ 3, 4 ]

In our example, we set a test that an object in the array will pass only if its id property is not equal to the specified ID. This ensures that the object with the specified ID is not included in the new array returned from filter[].

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

Sign up and receive a free copy immediately.

Ayibatari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.