Remove Specific Item From Array Based On Its Index and Item Value In JavaScript.

In this blog post you’ll learn how to remove the specific item from an array by its index value as well as by item itself in JavaScript. We’ll see different approaches to remove the array item in JavaScript.

JavaScript Method Used:

pop()
shift()
splice()
indexOf()

Remove Specific Items From Array Based On Its Index & Items Itself.

Approach 1: Using pop() Method.

pop() method removes the last element from the array.

JavaScript

    let fruits_array = ["Mango", "Banana", "Apple", "Pineapple", "Pomogranate", "Guava", "Grapes", "Orange"];

    // Remove last item.
    document.write("Removed item: ", fruits_array.pop());
    document.write("<br>");
    document.write("<b>Final Array: </b>", fruits_array);
  

Approach 2: Using shift() Method.

pop() method removes the first element from the array.

JavaScript

  	let fruits_array = ["Mango", "Banana", "Apple", "Pineapple", "Pomogranate", "Guava", "Grapes", "Orange"];

    // Remove first item.
    document.write("<b>Removed item: </b>", fruits_array.shift());
    document.write("<br>");
    document.write("<b>Final Array: </b>",fruits_array);
    

Approach 3: Remove Array Item By Items Index Value Using Splice() Method.

Splice method used to remove array items.
Splice method used to add array items.
Splice method changes the original array.

JavaScript

    let fruits_array = ["Mango", "Banana", "Apple", "Pineapple", "Pomogranate", "Guava", "Grapes", "Orange"];

    // Remove the specific item using its index using splice method.
    document.write("<b>Removed item: </b>", fruits_array.splice(2,1));
    document.write("<br>");
    document.write("<b>Final array: </b>",fruits_array);
  

Approach 4: Remove Array Item By Items Value (name) Using Combination of Splice(), indexOf() Method.

First we get the index value of the array item that we want to remove using the indexOf() method based on the given item name.

Index method returns the index of a given array item and if that array item does not exist then it returns -1.

Based on the return value we remove the item from the array using splice() method.

JavaScript

    let fruits_array = ["Mango", "Banana", "Apple", "Pineapple", "Pomogranate", "Guava", "Grapes", "Orange"];
    document.write("<b>Original array: </b>",fruits_array);
    // Remove the specific item using its value.
    let index_value = fruits_array.indexOf("Apple");
    
    if(index_value !== -1){
        fruits_array.splice(index_value, 1);
    }
    document.write("<br>");
    document.write("<b>Updated array: </b>",fruits_array);
  

Approach 5: Remove Array Item By Items name Using Combination of indexOf() Method & For Loop.

First we get the index value of the array item that we want to remove using the indexOf() method based on the given item name.

Index method returns the index of a given array item and if that array item does not exist then it returns -1.

Based on the return index value we run a for loop and store all the array items in another empty array except the item present at the return index.

JavaScript

    let fruits_array = ["Mango", "Banana", "Apple", "Pineapple", "Pomogranate", "Guava", "Grapes", "Orange"];

    let index_value = fruits_array.indexOf("Apple");
    document.write("<b>Original Array: </b>", index_value);
    if(index_value !== -1){
        let updated_array = [];
        for (let i = 0; i < fruits_array.length; i++) {
            const element = fruits_array[i];
            if(i !== index_value){
                updated_array.push(element);
            }
        }
        document.write("<br>");
        document.write("<b>Updated Array: </b>", updated_array);
    }  

So these are some of the many ways you can remove the array items from the array in javascript based on index value as well as based on item name. If you have any query or suggestion, feel free to write in the comment section.