remove-specific-item-from-an-array-in-javascript

Question:

I have an array of numbers and I’m using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array?

Answer :

Find the index of the array element you want to remove using indexOf, and then remove that index with splice.

const array = [2, 5, 9];

console.log(array);

const index = array.indexOf(5);
 // Finding index of 5
if (index > -1) {                 
  array.splice(index, 1);       // Using splice remove the 5
}

// array = [2, 9]
console.log(array); 

Basic Concepts

The second parameter of splice is the number of elements to remove. Note that splice modifies the array in place and returns a new array containing the elements that have been removed.


For the reason of completeness, here are functions. The first function removes only a single occurrence (i.e. removing the first match of 5 from [2,5,9,1,5,8,5]), while the second function removes all occurrences

function removeItemOnce(arr, value) {
  var index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

function removeItemAll(arr, value) {
  var i = 0;
  while (i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1);
    } else {
      ++i;
    }
  }
  return arr;
}
// Usage
console.log(removeItemOnce([2,5,9,1,5,8,5], 5))
console.log(removeItemAll([2,5,9,1,5,8,5], 5))

Advance Concept


For Typescript

Technique and Method are same. In TypeScript, these functions can stay type-safe with a type parameter:

const index = array.indexOf(5);
 // Finding index of 5
if (index > -1) {                 
  array.splice(index, 1);       // Using splice remove the 5
}

function removeItemOnce<T>(arr: Array<T>, value: T): Array<T> {
  var index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

function removeItemAll<T>(arr: Array<T>, value: T): Array<T> {
  var i = 0;
  while (i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1);
    } else {
      ++i;
    }
  }
  return arr;
}

Leave a Reply

Your email address will not be published.

Recent post

Redux to a Next JS App
Redux to a Next JS App
  • July 16, 2021
How to Create Objects In JavaScript
How to Create Objects In JavaScript?
  • June 29, 2021
HTML forms
HTML Forms
  • June 23, 2021
Need a successful project?

Lets Work Together

Estimate Project
  • right image
  • Left Image