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 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Learn to create profile card using HTML and CSSCSSSocial Media Colors: Sass VariablesMiscellaneousHow to disable right click and drag and drop of images using jQuery?jQueryHow to Sort (Shuffle) an Array in Random Order in JavaScript?JavaScriptAdd animation to your skills bar using CSSCSSComponents and Props in ReactReact