Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Remove Element from an Array in JavaScript
Removing an element from an array in Javascript can be achieved using various approaches. Removal of an element can be done from the begining, end or from any specific position. We will be understanding various approaches for removing element from an array in Javascript based on our need.
In this article, we are having an array of numbers and our task is to remove an element from an array in Javascript.
Approaches to Remove Element from Javascript Array
Here is a list of approaches for removing an element from an array in Javascript which we will be discussing in this article with stepwise explaination and complete example codes.
- Using pop() Method
- Using shift() Method
- Using splice() Method
- Using slice() Method
- Using filter() Method
- Using delete operator
- Using Array Reset
- Using set() Method
- Using splice() Method with forEach
- Using a new Array with for Loop
- Using splice() Method with indexOf()
- Using lodash _.remove() Method
Using pop() Method
To remove element from array in Javascript, we have used pop() method. It is used to remove the last element from an array and return the deleted element.
- To display the array, removed element and updated array after deletion, we have use div with id array, removed and result respectively. We have used getElementById() and innerHTML to get the div and display the array, removed element and output.
- Then we have used arr.pop() to remove the last element of array stored in arr.
Example
Here is a complete example code implementing above mentioned steps for removing an element from an array using pop() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have used <strong>pop()</strong>
method for removing an element from an array in
Javascript.
</p>
<div id="array"></div>
<div id="removed"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
let deletedEle= arr.pop();
document.getElementById("removed")
.innerHTML = "Removed Element: " + deletedEle;
document.getElementById("result")
.innerHTML = "Array after deletion: " + arr;
</script>
</body>
</html>
Using shift() Method
In this approach to remove element from array in Javascript, we have used shift() method. It is used to remove the first element from an array and returns the deleted element.
- To display the array, removed element and updated array after deletion, we have used same approach as first approach.
- Then we have used arr.shift() to remove the first element of array stored in arr.
Example
Here is a complete example code implementing above mentioned steps for removing an element from an array using shift() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have used <strong>shift()</strong>
method for removing an element from an array in
Javascript.
</p>
<div id="array"></div>
<div id="removed"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
let deletedEle= arr.shift();
document.getElementById("removed")
.innerHTML = "Removed Element: " + deletedEle;
document.getElementById("result")
.innerHTML = "Array after deletion: " + arr;
</script>
</body>
</html>
Using splice() Method
In this approach we have used splice() method to remove element from array in Javascript.
- The splice() method is used to modify the contents of an array by removing, replacing existing elements or adding new elements.
- We have used arr.splice(3, 1); to remove one element from third index of the array.
- For displaying the array and output we have used similar method as approach one.
Example
Here is a complete example code implementing above mentioned steps for removing an element from an array using splice() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have used <strong>splice()</strong>
method for removing an element from an array in
Javascript.
</p>
<div id="array"></div>
<div id="removed"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 5, 6];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
let deletedEle= arr.splice(3, 1);
document.getElementById("removed")
.innerHTML = "Removed Element: " + deletedEle;
document.getElementById("result")
.innerHTML = "Array after deletion: " + arr;
</script>
</body>
</html>
Using slice() Method
In this approach to remove element from array in Javascript, we have used slice() method. This method selects a portion of elements from array and returns a new array with those selected elements.
- We have used arr.slice(0, 2).concat(arr.slice(3)) to remove an element from Javascript array.
- The first slice operation arr.slice(0, 2) creates a new array of index from 0 to index 1 excluding index 2.
- The next slice operation arr.slice(3) creates a new array from third index to last element.
- The concat() method combines both the arrays into a single array removing the third element(2nd index) from the array.
Example
Here is a complete example code implementing above mentioned steps for removing an element from an array using slice() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have used <strong>slice()</strong>
method for removing an element from an array in
Javascript.
</p>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 5, 6];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
let newArr= arr.slice(0, 2).concat(arr.slice(3))
document.getElementById("result")
.innerHTML = "Array after deletion: " + newArr;
</script>
</body>
</html>
Using filter() Method
In this approach we have used filter() method to remove element from array in Javascript. It creates a new array with elements that pass a certain condition.
- We have used arr.filter(value => value!=5) which removes 5 from the array.
- Here, 5 is compared with each element in array. If value of any element is 5 then it is excluded from the array and if element value is not 5 then it is included in the array.
Example
Here is a complete example code implementing above mentioned steps for removing an element from an array using filter() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have used <strong>filter()</strong>
method for removing an element from an array in
Javascript.
</p>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 5, 6];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
let newArr= arr.filter(value => value!=5)
document.getElementById("result")
.innerHTML = "Array after deletion: " + newArr;
</script>
</body>
</html>
Using delete operator
In this approach to remove element from array in Javascript, we have used delete operator which delets any property or property value of an object (array in our case).
- We have used delete arr[1] which delets the element at index 1 in arr.
- It returns true and length of the array remain same as before deleting the element.
Example
Here is a complete example code implementing above mentioned steps for removing an element from an array using delete operator.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have used <strong>delete</strong>
operator for removing an element from an array in
Javascript.
</p>
<div id="array"></div>
<div id="removed"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
let deletedEle= delete arr[1];
document.getElementById("removed")
.innerHTML = "Removed Element: " + deletedEle;
document.getElementById("result")
.innerHTML = "Array after deletion: " + arr;
</script>
</body>
</html>
Using Array Reset
- We have two arrays in this example. We can either set the length of the array to 0 or assign the array to an empty array deleting all the elements of the array.
- For arr1, we have set the length of the array to 0 using length property removing all the elements of the array.
- For arr2, we have assigned this array to an empty array which removes all the elements of the array.
Example
Here is a complete example code implementing above mentioned steps for removing an element from an array.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have set array length as
0 for <strong>arr1</strong> and an empty array
for <strong>arr2</strong>.
</p>
<div id="array1"></div>
<div id="array2"></div>
<div id="result1"></div>
<div id="result2"></div>
<script>
let arr1 = [1, 2, 3, 4, 5, 6];
let arr2 = ["MongoDB", "ExpressJs", "ReactJs", "Node js"];
document.getElementById("array1")
.innerHTML = "Initial first array: " + arr1;
document.getElementById("array2")
.innerHTML = "Initial second array: " + arr2;
arr1.length=0;
arr2 = [];
document.getElementById("result1")
.innerHTML = "Updated first array: " + arr1;
document.getElementById("result2")
.innerHTML = "Updated second array: " + arr2;
</script>
</body>
</html>
Using set() Method
In this approach to remove element from array in Javascript, we have used set() method. Set only contains unique values, removing any duplicate elements if present.
- We have used new Set(arr) to convert array into set. Since set contains only unique values, it deletes any duplicate values.
- Then we have used spread operator(...) to convert set to array containing unique values and stored it in newArray.
Example
Here is a complete example code implementing above mentioned steps for removing an element from an array using set() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have used <strong>set()</strong>
method for removing duplicate elements from array in
Javascript.
</p>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 4, 5, 2, 8];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
let newArray= [...new Set(arr)];
document.getElementById("result")
.innerHTML = "Unique array: " + newArray;
</script>
</body>
</html>
Note: This approach is not recommended for removing elements from an array as it removes only duplicate values.
Using splice() Method with forEach
In this approach, We have used forEach() method with splice() method for removing element from an array in Javascript.
- We have used forEach() method to iterate over each element in the array where num represents current element.
- Then, we have used if/else conditional statement to find 3 in the array. The splice() method then removes one element at this index.
Example
Here is a complete example code implementing above mentioned steps for removing an element from an array using splice() method with forEach().
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have used <strong>forEach()</strong>
method with <strong>splice()</strong> for removing an
element from an Array in Javascript.
</p>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
arr.forEach((num, index) => {
if (num === 3) {
arr.splice(index, 1);
}
});
document.getElementById("result")
.innerHTML = "Array after deletion: " + arr;
</script>
</body>
</html>
Using a new Array with for Loop
In this approach we are using a for loop and conditional statement with a new array for removing element from array in Javascript.
- We are using a for loop for iterating over all the elements in array arr.
- The conditional statement finds the element which needs to be eliminated.
- All the elements are pushed in new array updatedArr using push() method except the element excluded by if/else conditional statement.
Example
Here is a complete example code implementing above mentioned steps for removing an element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 10, 9];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
let updatedArr = [];
for(let i=0; i<arr.length; i++){
if(arr[i] != 3){
updatedArr.push(arr[i]);
}
}
document.getElementById("result")
.innerHTML = "Array after deletion: " + updatedArr;
</script>
</body>
</html>
Using splice() Method with indexOf()
In this approach for removing element from array in Javascript, we have used indexOf() method with splice() method.
- We have used indexOf() method to find the index of element which is to be removed.
- Then, we have used if/else statement to check if the index is found by indexOf method.
- The splice() method then removes the specified index from array.
Example
Here is a complete example code implementing above mentioned steps for removing an element from an array using splice() method with indexOf() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have used <strong>indexOf()</strong>
method with <strong>splice()</strong> for removing an
element from an Array in Javascript.
</p>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 5, 6];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
let index =arr.indexOf(4);
if(index !== -1){
arr.splice(index, 1);
}
document.getElementById("result")
.innerHTML = "Array after deletion: " + arr;
</script>
</body>
</html>
Using lodash _.remove() Method
In this approach we have used Lodash library for removing the element from array. We have used _.remove() method of Lodash library to remove the elements from the array.
- We have used script tag in head section to include the Lodash library from a Content Delivery Network (CDN) to add Lodash's utility functions which allows us to use lodash methods such as _.remove.
- We have used addEventListener to add DOMContentLoaded event which make sure that before execution of javascript, HTML code is already loaded.
- We have used Lodash _.remove() method, which removes all the even numbers from the element.
Example
Here is a complete example code implementing above mentioned steps for removing an element from an array using lodash _.remove() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Removing element from Array in Javascript
</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" defer></script>
</head>
<body>
<h2>
Removing element from Array in Javascript
</h2>
<p>
In this example, we have used <strong>lodash _.remove()
</strong> method for removing an element from an Array
Javascript.
</p>
<div id="array"></div>
<div id="removed"></div>
<div id="result"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
let arr = [1, 2, 3, 4, 5, 6];
document.getElementById("array")
.innerHTML = "Initial array: " + arr;
let deletedEle = _.remove(arr, num => num % 2 === 0);
document.getElementById("removed")
.innerHTML = "Removed Elements: " + deletedEle;
document.getElementById("result")
.innerHTML = "Array after deletion: " + arr;
});
</script>
</body>
</html>
Conclusion
In this article, we have understood how to remove an element from an array in Javascript. We have learnt twelve different approaches, some of them are by using pop() method, shift() method, splice()method, slice() method, filter method and many more. Out of all the approaches, using set() method is not recommended as it is not for removing element but to store unique values and using splice() with forEach() method may lead to index shifting, so prefer filter() method instead.
273 Views
