10 Effective ways to Remove Element from an array in JavaScript

Do you want to know how to remove elements from an array in JavaScript?

Well, just keep reading to know these ten (10) effective and ultimate solutions that will help to remove the elements.

In this article, you’ll discover the secrets of removing elements from arrays in JavaScript.

Let’s start to explore multiple methods, including splice, filter, and more, with clear explanations and examples.

But before we dive into the solutions, let’s first understand the JavaScript Arrays.

What is array in JavaScript?

An array in JavaScript is like a container that can hold multiple values at once.

Each value is stored in a specific position, called an index, and you can access the values by referring to their index number.

Arrays are useful when you need to keep track of a list of items, like a shopping list or a list of names.

You can create an array using an array literal, which is just a list of values separated by commas and enclosed in square brackets.

For example, you could create an array of subjects like this:

 let subjects = ["English", "Math", "Programming", "Web Development", "History"];

Arrays are actually a special type of object in JavaScript, so if you use the typeof operator on an array, it will return “object”.

How to remove element from an array in JavaScript? 10 Effective solutions

Here are 10 solutions to find and remove an element from JavaScript array:

Solution 1: Using the splice() method

The splice() method can be used to add or remove elements from an array.

To remove an element, you can specify the index of the element you want to remove and the number of elements to remove.

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
subjects.splice(0, 1); ✅ // Starting at index position 0, remove 1 elements
console.log(subjects);  

Output:

[ 'Math', 'Programming', 'Web Development', 'History' ]

Solution 2: Using the pop() method

The pop() method removes the last element from an array and returns that element. This method changes the length of the array.

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
let lastElement = subjects.pop(); ✅
console.log(lastElement); 
console.log(subjects); 

Output:

History (last element)

[ 'English', 'Math', 'Programming', 'Web Development' ]

Solution 3: Using the shift() method

The shift() method removes the first element from an array and returns that element. This method changes the length of the array.

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
let firstElement = subjects.shift(); ✅
console.log(firstElement);
console.log(subjects); 

Output:

English (First element)

[ 'Math', 'Programming', 'Web Development', 'History' ]

Solution 4: Using the filter() method

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

You can use this method to create a new array without the element you want to remove.

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
let newSubjects = subjects.filter(item => item !== "English");  ✅

console.log(newSubjects); 

Output:

[ 'Math', 'Programming', 'Web Development', 'History' ]

Solution 5: Using the slice() method

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).

You can use this method to create a new array without the element you want to remove.

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
let newArray = subjects.slice(0, 2).concat(subjects.slice(3)); ✅
console.log(newArray); 

Output:

[ 'English', 'Math', 'Web Development', 'History' ]

Solution 6: Using the delete operator

The delete operator removes a property from an object. You can use this operator to remove an element from an array by deleting its property.

However, this will leave a hole in the array and is not recommended.

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
delete subjects[1]; ✅

console.log(subjects);

Output:

[
  'English',
  <1 empty item>,
  'Programming',
  'Web Development',
  'History'
]

Solution 7: Using a loop

You can use a loop to iterate over the elements of an array and create a new array without the element you want to remove.

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
let newArray = [];
for (let i =0; i<subjects.length; i++){ ✅
    if (subjects[i] !=="English"){
        newArray.push(subjects[i]);
    }
}
console.log(newArray);

Output:

[ 'Math', 'Programming', 'Web Development', 'History' ]

Solution 8: Using reduce()

The reduce() method executes a reducer function on each element of the array and returns a single output value.

You can use this method along with concat() to create a new Array without the specified index.

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
subjects = subjects.reduce((accu,item,index) => { ✅
if(index !== subjects.indexOf("Math")){
return accu.concat(item); ✅

}
return accu;
},[]);
console.log(subjects); 

Output:

[ 'English', 'Programming', 'Web Development', 'History' ]

Solution 9: Using forEach()

The forEach() method executes a provided function once for each element in an Array.

You can use this method along with push() to create a new Array without the specified index.

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
let newSubjects = [];
subjects.forEach((item,index) => { ✅
if(index !== subjects.indexOf("History")){
newSubjects.push(item);
}
});
console.log(newSubjects);

Output:

[ 'English', 'Math', 'Programming', 'Web Development' ]

Solution 10: Using Array.from()

The Array.from() static method creates a new Array instance from an iterable object.

You can use this method along with keys() and filter() methods to create a new Array without the specified index.

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
subjects = Array.from(subjects.keys()).filter(i => i !== subjects.indexOf("Web Development")).map(i =>  ✅
subjects[i]);
console.log(subjects);

Output:

[ 'English', 'Math', 'Programming', 'History' ]

How to remove first element from array in JavaScript?

You can remove the first element from an array in JavaScript using the shift() method.

As mentioned above, the shift() method removes the first element from an array and returns that element.

This method changes the length of the array.

Here’s an example:

let subjects = ["English", "Math", "Programming", "Web Development", "History"];
let firstElement = subjects.shift(); ✅
console.log(firstElement); 
console.log(subjects);

As you can see, we use the shift() method to remove the first element from the array and store it in the firstElement variable.

After calling the shift() method, the array is updated to contain only the remaining elements.

Output:

English (The first element)

[ 'Math', 'Programming', 'Web Development', 'History' ] (Remaining elements)

How to remove specific element from array in JavaScript?

To remove specific elements, you can use the splice() and filter() method. You can also use the loop.

Example code and output are already given above.

Conclusion

In conclusion, we explored ten effective solutions for removing elements from arrays in JavaScript.

Using these various methods such as splice, pop, shift, filter, slice, delete, looping, reduce, forEach, and Array.from, accompanied with clear explanations and illustrative examples.

You can now remove elements from JavaScript arrays.

We are hoping that this article provides you with enough information that helps you understand how to remove elements from an array in JavaScript.

If you want to dive into more JavaScript topics, check out the following articles:

• JavaScript base64 decode
• classlist.add JavaScript
• Dictionary in JavaScript

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
 · View all posts by Caren Bautista →