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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
What happened to your Google Analytics Tracking ID, can’t find it?MiscellaneousIs Software Really Eating The World? I don’t think soMiscellaneousHow to set the permissions on all files and folders in Mac?MiscellaneousThe simple difference between var, let and const in JavascriptJavaScriptHow to send and receive query strings via links in Angular 9?AngularHow to Install PHP composer in Mac OS Catalina?PHP