YogeshChauhan.com
How to remove a specific item from an array in JavaScript?
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.

There are many other method available to remove array elements even more easily. I will discuss those methods in the future posts.

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 5 How to create flickering text using CSS? Mar 4 How to use data-* Attributes in HTML? Mar 4 The substr() method in JavaScript and how it’s different from substring() Mar 4 A complete guide to add responsive YouTube videos using HTML and CSS Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress?

You might also like these

How to create an empty array in Swift?SwiftSolution to “NullInjectorError: No provider for module” in Angular 9AngularFor Each Loop in Swift for BeginnersSwiftHow to Write Complex Search Queries in SQL?SQL/MySQLALTER DATABASE in PostgreSQLPostgresPre-defined DatePipe format options in Angular 9Angular