Yogesh Chauhan's Blog

How to remove a specific item from an array in JavaScript?

in JavaScript on November 5, 2020

We know that we can use the push() method to add elements to an array. 

To remove, array from a specific index, we can do it in few different ways.

1: Using slice() method

The spice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

We can use splice() method to remove an element of an array at an index.

So, for our use, the syntax is like this:


array.splice(index, number_of_elements_to_be_removed);

Examples


array = [1, 2, 3]

array.splice(1, 1);

console.log(array)

// [1, 3]

array = [1, 2, 3]

array.splice(1, 2);

console.log(array)

// [1]

You can use a for loop to do the same.


const array = [1,2,3];

for(var i = array.length - 1; i >= 0; i--) {
    if(array[i] === 2) {
        array.splice(i, 1);
    }
}

console.log(array)

// [1,3]

2: Using indexOf() and splice()

If the array is too long and the elements are not sorted, especially the numbers, then we can use indexOf() to figure out the size first and then use spice() to remove the element. 

For e.g.


const array = [61, 82, 63, 74, 55, 56, 7, 88, 39, 170];

const index = array.indexOf(55);

array.splice(index, 3);

console.log(array);

// [ 61, 82,  63, 74, 88, 39, 170 ]

You can create a function like this:


const array = [61, 82, 63, 74, 55, 56, 7, 88, 39, 170];

function removeElement(arr, value) {
  var index = arr.indexOf(value);
  arr.splice(index, 3);
  return arr;
}

console.log(removeElement(array, 55));

// [ 61, 82,  63, 74, 88, 39, 170 ]

Remove every recurring element from the array

We can change the function above slightly to do the same.


const array = [1, 1, 2, 3, 4, 5, 5, 6, 5, 5, 1];

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

removeAllElements(array, 1)

// [ 2, 3, 4, 5, 5, 6, 5, 5 ]

Remove the element but keep the indexes

If you just want to make the element at index i no longer exist, but you don’t want the indexes of the other elements to change use this:


delete array[i];

//It will change the element in the array to undefined.

Since JavaScript arrays are objects, elements can be deleted by using the JavaScript operator delete.

👉 Using delete() may leave undefined holes in the array. Use pop() or shift() instead.


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to add a select dropdown in React?ReactSelf-Driving and Intelligent NetworksMiscellaneousHow to add a Bar Chart in Angular App?AngularA simple example on grid ‘auto-fill’ vs ‘auto-fit’CSSComposing and Extracting Components in ReactReactWindow setInterval() Method in JavaScriptJavaScript