Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Removing an 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 beginning, end or from any specific position. We will be understanding various approaches for removing elements from an array in Javascript based on our needs.
In this article, we are working with an array of numbers and our task is to remove elements from an array in Javascript using different methods.
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 step-by-step explanation and complete example codes.
- Using pop() Method
- Using shift() Method
- Using splice() Method
- Using slice() Method
- Using filter() Method
- Using delete operator
- Using splice() Method with indexOf()
Using pop() Method
The pop() method removes the last element from an array and returns the deleted element. This method modifies the original array.
Syntax
array.pop()
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Last Element with pop()</title>
</head>
<body>
<h2>Removing Last Element from Array</h2>
<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>
Initial array: 1,2,3,4 Removed Element: 4 Array after deletion: 1,2,3
Using shift() Method
The shift() method removes the first element from an array and returns the deleted element. This method also modifies the original array.
Syntax
array.shift()
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove First Element with shift()</title>
</head>
<body>
<h2>Removing First Element from Array</h2>
<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>
Initial array: 1,2,3,4 Removed Element: 1 Array after deletion: 2,3,4
Using splice() Method
The splice() method is the most versatile approach for removing elements. It can remove elements from any position in the array and returns an array of removed elements.
Syntax
array.splice(startIndex, deleteCount)
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Element with splice()</title>
</head>
<body>
<h2>Removing Element at Specific Index</h2>
<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(2, 1); // Remove 1 element at index 2
document.getElementById("removed").innerHTML = "Removed Element: " + deletedEle;
document.getElementById("result").innerHTML = "Array after deletion: " + arr;
</script>
</body>
</html>
Initial array: 1,2,3,4,5,6 Removed Element: 3 Array after deletion: 1,2,4,5,6
Using slice() Method
The slice() method creates a new array without modifying the original. To remove an element, you combine portions before and after the target element using concat().
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Element with slice()</title>
</head>
<body>
<h2>Creating New Array Without Element</h2>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 5, 6];
document.getElementById("array").innerHTML = "Initial array: " + arr;
// Remove element at index 2 (value 3)
let newArr = arr.slice(0, 2).concat(arr.slice(3));
document.getElementById("result").innerHTML = "Array after deletion: " + newArr;
</script>
</body>
</html>
Initial array: 1,2,3,4,5,6 Array after deletion: 1,2,4,5,6
Using filter() Method
The filter() method creates a new array with elements that pass a condition. This is ideal for removing elements by value rather than index.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Element with filter()</title>
</head>
<body>
<h2>Filtering Out Specific Value</h2>
<div id="array"></div>
<div id="result"></div>
<script>
let arr = [1, 2, 3, 4, 5, 6];
document.getElementById("array").innerHTML = "Initial array: " + arr;
// Remove all occurrences of value 3
let newArr = arr.filter(value => value !== 3);
document.getElementById("result").innerHTML = "Array after deletion: " + newArr;
</script>
</body>
</html>
Initial array: 1,2,3,4,5,6 Array after deletion: 1,2,4,5,6
Using delete operator
498 Views
