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 a given position of the array in Javascript
In JavaScript, you can remove an element from a specific position in an array using several methods. Each approach has different behaviors and use cases.
Syntax
Here are the main syntaxes for removing elements:
// Delete operator (leaves undefined) delete arr[index]; // Slice method (creates new array) arr.slice(0, index).concat(arr.slice(index + 1)); // Splice method (modifies original array) arr.splice(index, 1);
Using delete Operator
The delete operator removes an element but leaves undefined in its place, keeping the array length unchanged.
<!DOCTYPE html>
<html>
<head>
<title>Remove element using delete operator</title>
</head>
<body>
<div id="output"></div>
<script>
let arr = [10, "Alice", 20, "Edward", 30, 40];
document.getElementById("output").innerHTML = "Original array: " + arr + "<br>";
delete arr[3]; // Remove "Edward" at index 3
document.getElementById("output").innerHTML += "After delete: " + arr + "<br>";
document.getElementById("output").innerHTML += "Length: " + arr.length + "<br>";
document.getElementById("output").innerHTML += "Element at index 3: " + arr[3];
</script>
</body>
</html>
Original array: 10,Alice,20,Edward,30,40 After delete: 10,Alice,20,,30,40 Length: 6 Element at index 3: undefined
Using slice() Method
The slice() method creates a new array by combining elements before and after the target index, effectively removing the element without modifying the original array.
<!DOCTYPE html>
<html>
<head>
<title>Remove element using slice method</title>
</head>
<body>
<div id="output"></div>
<script>
let arr = [10, "Alice", 20, "Edward", 30, 40];
let indexToRemove = 3;
document.getElementById("output").innerHTML = "Original array: " + arr + "<br>";
// Create new array without element at index 3
let newArr = [
...arr.slice(0, indexToRemove),
...arr.slice(indexToRemove + 1)
];
document.getElementById("output").innerHTML += "New array: " + newArr + "<br>";
document.getElementById("output").innerHTML += "Original unchanged: " + arr;
</script>
</body>
</html>
Original array: 10,Alice,20,Edward,30,40 New array: 10,Alice,20,30,40 Original unchanged: 10,Alice,20,Edward,30,40
Using splice() Method (Recommended)
The splice() method removes elements from the original array and returns the removed elements. This is the most commonly used approach for removing elements by index.
<!DOCTYPE html>
<html>
<head>
<title>Remove element using splice method</title>
</head>
<body>
<div id="output"></div>
<script>
let arr = [10, "Alice", 20, "Edward", 30, 40];
document.getElementById("output").innerHTML = "Original array: " + arr + "<br>";
// Remove 1 element at index 3
let removedElement = arr.splice(3, 1);
document.getElementById("output").innerHTML += "After splice: " + arr + "<br>";
document.getElementById("output").innerHTML += "Removed element: " + removedElement + "<br>";
document.getElementById("output").innerHTML += "New length: " + arr.length;
</script>
</body>
</html>
Original array: 10,Alice,20,Edward,30,40 After splice: 10,Alice,20,30,40 Removed element: Edward New length: 5
Comparison
| Method | Modifies Original | Array Length | Best For |
|---|---|---|---|
delete |
Yes | Unchanged | Rarely recommended |
slice() |
No | Reduced by 1 | Immutable operations |
splice() |
Yes | Reduced by 1 | Most common approach |
Conclusion
Use splice() for most cases when you need to remove elements by index. Choose slice() when you need to preserve the original array, and avoid delete as it leaves holes in the array.
375 Views
