Remove Item from JavaScript Array by Value

In this tutorial, we will learn to remove an item from a JavaScript array by value.

An array is a data structure that can store a collection of data with the same data type. A contiguous memory location is allocated to the array elements. Each array element is identified by its index value.

You must process an array by inserting an element, removing or changing, etc. JavaScript has a lot of methods to update an array. Let us take a look at various ways to remove an item from a JavaScript array by value.

Following are the Methods/Functions to remove an item from an array by value ?l

  • The Array filter() Method
  • The Array splice() Method

Using the Array filter() Method

A filter() is the method that creates a new array of elements that satisfies the given condition. A filter() method does not change the original array.

Users can follow the below syntax to use the filter() method to remove an item from a JavaScript array by value.

Syntax

let arr = [1,2,3,......,n];
array.filter( function(curr_element, index, arr)) => {
   /* condition*/
});

In the above syntax, we have used the filter method and passed the callback function which contains the condition to filter the array.

Parameters

  • function ? A function to execute for every array element

  • curr_element ? Value of the current element

  • index ? Index of the current element (optional)

  • arr ? Array of the current element (optional)

Example

In the below-given example, we are using the filter() method to remove an item from a JavaScript array by value. We have taken two array examples and removed an item from a JavaScript array by value.


<html>
<body>
   <h3>Use <i>filter()</i> method to remove an item from a JavaScript array by value.</h3>
   <p><b>Example 1: </b>Remove value 4</p>
   <div id="output1"></div>
   <p><b>Example 2:</b> remove value "E"</p>
   <div id="output2"></div>
   <script>
      let output1 = document.getElementById("output1");
      let output2 = document.getElementById("output2");
      let output = "";
      let arr1 = [1, 2, 3, 4, 5];
      output = "Array before filter() = " + arr1 + "<br>";
      let arr1_new = arr1.filter(function(f) {
         return f !== 4
      });
      output = output + " New array after filter() = " + arr1_new;
      output1.innerHTML = output;
      let arr2 = ["A", "B", "C", "D", "E"];
      output = "Array before filter() = " + arr2 + " <br>";
      let arr2_new = arr2.filter(function(f) {
         return f !== "E"
      });
      output = output + " New array after filter() = " + arr2_new;
      output2.innerHTML = output;
   </script>
</body>
</html>

In the above two arrays, users can see that the filter() method returns the new array of elements that matches the condition.

Using the Array splice() Method

The splice() method adds or removes elements from an array.

The splice() method can change the Original Array.

Viewers can follow the below syntax to use the splice() method to remove an item from a JavaScript array by value.

Syntax

let arr = [1,2,3,......,n];
arr.splice( index, count, elements)

In the above syntax, we have used the spilce() method, and users can learn about its parameters below.

Parameters

  • index ? Index of an element to add/remove

  • count ? Number of elements to add (optional)

  • elements ? Name of elements to add(optional)

Example

In the below-given example, we are using the splice() method to remove an item from a JavaScript array by value. We are taking two array examples and removed an item from a JavaScript array by value.


<html>
<head>
</head>
<body>
   <h3>Use <i>splice()</i> to remove an item from a JavaScript array by value.</h3>
   <p><b>Example 1</b></p>
   <div id = "output1"></div>
   <p><b>Example 2</b></p>
   <div id = "output2"></div>
   <script>
      let output1 = document.getElementById("output1");
      let output2 = document.getElementById("output2");
      let output="";
      let arr1=[1,2,3,4,5];
      let element=arr1.indexOf(2);
      output="Array before splice() = "+arr1+"<br>";
      if (element > -1) {
         arr1.splice(element, 1);
      }
      output=output+"New array after splice() = "+arr1;
      output1.innerHTML = output;
      let arr2=["A","B","C","D","E"];
      let element1=arr2.indexOf("B");
      output="Array before splice() = "+arr2+"<br>";
      if (element1 > -1) {
         arr2.splice(element1, 1);
      }
      output=output+"New array after splice(): "+arr2;
      output2.innerHTML = output;
   </script>
</body>
</html>

We have learned two methods to remove an item from a JavaScript array by value. Among these methods, the filter() method creates a new array of elements based on the condition.

The splice() is used to add or remove the elements on a specific index that changes the original array.

Updated on: 2022-09-06T14:24:47+05:30

480 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements