Removing data from Array is a very common task for software developers. To Remove elements from array javascript, there is not a simple (inbuild) Array.remove() method. But you can add and remove array elements in different ways in JavaScript.
Some Array operations
Here is some operation to remove elements from an Array:-
- Remove the Last element from array javascript.
- Remove the First element from array javascript.
- Javascript removes an element from the array by Index.
- Javascript remove an element from the array by Value
- Removing Multiple Specific Elements
Ways Remove element from array Javascript
There are different methods/ways and techniques you can use to remove elements from JavaScript arrays. Some of are:-
- pop() – Removes elements from the End of an Array.
- shift() – Removes elements from the beginning of an Array.
- splice() – removes elements from a specific Array index.
- filter() – This method grants programmatically removes elements from an Array.
- Using the ES6 arrow functions.
- Explicitly Remove Array Elements Using the Delete Operator
JavaScript remove the “LAST” element from Array
Method 1: Length property
Simply use Javascript array length property for remove elements from the end in the array.
arr.length = 4;You just need to set less value than the current value of array length. So which element index is greater than or equal to the new length will be removed. See below complete example, on click button, will show both array values.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click/button>
<p id="oldArray"></p>
<p id="newArray"></p>
<script>
function myFunction() {
var arr = [1, 2, 3, 4, 5, 6];
document.getElementById("oldArray").innerHTML = arr;
arr.length = 4; // set length to remove elements
document.getElementById("newArray").innerHTML = arr;
console.log( arr );
}
</script>
</body>
</html>Method 2: pop() function
Use pop() method removes the last element of the array.
arr.pop();Pop() method returns that element and updates the length property. It modifies the array and removed the last element completely.
Complete code:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click</button>
<p id="oldArray"></p>
<p id="newArray"></p>
<script>
function myFunction() {
var arr = [1, 2, 3, 4, 5, 6];
document.getElementById("oldArray").innerHTML = arr;
arr.pop();
document.getElementById("newArray").innerHTML = arr;
console.log( arr );
}
</script>
</body>
</html>
Output: will be the same for both methods. You can also see the output in the console log.
Removing the “FIRST” Elements from JavaScript Array
Use the shift() method to remove the very first element from the Javascript array. No parameters are required, this method only removes the first element and the remaining elements are shifted down.
arr.shift();Complete code
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click</button>
<p id="oldArray"></p>
<p id="newArray"></p>
<script>
function myFunction() {
var arr = [1, 2, 3, 4, 5, 6];
document.getElementById("oldArray").innerHTML = arr;
arr.shift();
document.getElementById("newArray").innerHTML = arr;
}
</script>
</body>
</html>Output:
Note: If there are no elements in the array then the method returns error undefined.
Removes elements from a specific Array “INDEX“
Use splice() method to add or remove specifies elements from an array. In this method, you have to pass the argument. The first parameter specifies the location at which to begin adding or removing elements and the second is for a number of elements adding or removing.
var removed = arr.splice(1,2);Complete code: splice method to remove two elements starting position index is 1.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click</button>
<p id="oldArray"></p>
<p id="newArray"></p>
<script>
function myFunction() {
var arr = [1, 2, 3, 4, 5, 6];
document.getElementById("oldArray").innerHTML = arr;
var removed = arr.splice(1,2);
document.getElementById("newArray").innerHTML = arr;
}
</script>
</body>
</html>Output:
Javascript remove an element from the array by “VALUE”
Method 1: Usingsplice()) method
In an upper example, you see deleting array element by index. Now let’s see how you can remove it by using the direct value of elements.
You have to use the same (splice()) method as the above example. But here first you must identify the index of the target element. Then use this index in the splice method to remove it.
Let’s see the example of how to remove “4” value form array.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click</button>
<p id="oldArray"></p>
<p id="newArray"></p>
<script>
function myFunction() {
var arr = [1, 2, 3, 4, 5, 6];
document.getElementById("oldArray").innerHTML = arr;
for( var i = 0; i < arr.length; i++){
if ( arr[i] === 4) {
arr.splice(i, 1);
}
}
document.getElementById("newArray").innerHTML = arr;
}
</script>
</body>
</html>Output:
Method 2: Using Array filter Method
Filter() is a single parameter callback method. The callback is triggered as the filter method iterates through the array elements. In this method, you have to pass three parameters.
- Current value
- Array Index
- Full array
Method should return either true or false. If its satisfy the condition return true else false.
Method overview:-
var filtered = arr.filter(function(value, index, arr){
return value > 3;
});Complete code:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click</button>
<p id="oldArray"></p>
<p id="newArray"></p>
<script>
function myFunction() {
var arr = [1, 2, 3, 4, 5, 6];
document.getElementById("oldArray").innerHTML = arr;
var filtered = arr.filter(function(value, index, arr){
return value > 3;
});
document.getElementById("newArray").innerHTML = filtered;
}
</script>
</body>
</html>Explicitly Remove Array Elements Using the “Delete Operator”
You can use a delete operator to remove element of array, it’s very easy.
delete arr[3]; // delete element with index 3but there is a drawback of using these ways, after deleting an element from Array is not changing a length property and not affect the indexes of subsequent elements.
Important note: The delete operator is mainly designed to remove properties from JavaScript objects, which arrays are objects. It’s removing memory space and they are no more references to the value for removed elements.
Q: How to Removing Multiple Specific Elements from the JS array?
Answer: Use the splice()) method, Where you need to pass the parameters. The first parameter is the start point and the second one is for a number of elements.
var removed = arr.splice(1,2);Q: How to Clear or Reset a JavaScript Array?
Answer: There are many ways to delete all elements of an Array. The simplest way is to set an array variable to an empty array. But simple is not always best. This code is not perfect.
var ar = [1, 2, 3, 4, 5, 6];
ar = []; // empty arrayDo comment if you have any doubt and suggestion on this tutorial.
Note: The All How to remove an element from an array in JavaScript Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version