Javascript Array Remove Element by Value

In this article, we will see how to remove array element by value in Javascript.

Javascript array

Sometimes in your application you might by dealing with a list of objects. For example, the list of products in a shopping cart or the list of colors the user has selected. In situations like that, you can use an array to store that list. Let’s see, how to store the list using array:

Ex:

let selected = ['red', 'yellow', 'blue'];
console.log(selected);    //['red', 'yellow', 'blue']

In the above code, we have created an array called “selected”. And initialized the color value like red, yellow, etc using square brackets, the square brackets indicate the array. Then we logged this on the console. See the output image, our list of array values is displayed.

If you want to display the first element of an array, then you can log like “selected[0]”. The index of the first element is 0, so we put 0 in the square brackets. So, you can access the particular array element using an index value. If you want to remove the element, then follow the below steps.

How to remove an array element by value

You can use the first method if you want to remove all of your array elements if the value you give is more than one. You can use the second method to remove the first occurrence of value from array elements.

1. Remove all the given value elements

The splice() method is a built-in JavaScript method that allows you to add or remove elements from an array. It takes two parameters: the starting index at which to begin adding or removing elements, and the number of elements to remove (if any). You can also provide additional arguments to insert new elements at the specified index.

To remove an array element by value, you first need to find the index of the element in the array. You can do this using a loop, the indexOf() method, or other methods. Once you have the index, you can use the splice() method to remove the element.

Here’s an example using a loop to remove all occurrences of a value from an array:

let array = [1, 2, 3, 4, 5, 3];
let valueToRemove = 3;

for (let i = 0; i < array.length; i++) {
  if (array[i] === valueToRemove) {
    array.splice(i, 1);
    i--; // decrement i to account for the removed element
  }
}

console.log(array); // [1, 2, 4, 5]

In this example, we first define an array and the value we want to remove. We then loop through the array using a for loop, checking if each element is equal to the value we want to remove. If it is, we use the splice() method to remove the element at the current index (i), and we decrement ‘i’ to account for the fact that the array length has been reduced by one. Once the loop is complete, we log the resulting array to the console.

2. Remove the first occurrence of the value

If you only want to remove the first occurrence array element of a value, you can use the indexOf() method to find the index of the first element with that value:

let array = [1, 2, 3, 4, 5, 3];
let valueToRemove = 3;
let index = array.indexOf(valueToRemove);

if (index !== -1) {
  array.splice(index, 1);
}

console.log(array); // [1, 2, 4, 5, 3]

In this example, we first define an array and the value we want to remove. We then use the indexOf() method to find the index of the first element with that value. If the index is not -1 (i.e., if the value is found in the array), we use the splice() method to remove the element at that index. Note that in this case, the original array is modified because we used the splice() method.