Quick Reach
Javascript remove from array methods
Removing elements from Javascript array can be accomplished by using pop and shift methods. The javascript pop method removes last element from an array. If you need to remove elements from the beginning of an array then use javascript shift method. Both of these methods are explained below with the online example and JS code.
The array pop method
The javascript array pop method removes array element from the last of an array. The syntax to use pop method is:
Arrayname.pop();
The pop method returns the deleted element from the array. If you assign this to a variable you can get the value of that element as shown in the following example.
An array remove example by using the pop method
The following example shows how to use array pop method to delete the element from an array. For our example, we have created an array of four numbers. After that, we used javascript pop method and assigned it to a variable. The variable’s value is shown in an alert while array after the pop method is displayed in an HTML paragraph. See demo by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=“p1”></p>
<script type=“text/javascript”>
var NumArr = [1,2,3,4];
var i;
var arrdisplay = “The array after pop: <BR>”;
var deleteelement = NumArr.pop();
alert (deleteelement);
//Array after pop
for (i=0; i < NumArr.length; i++){
arrdisplay += NumArr[i] + “<BR>”;
}
document.getElementById(“p1”).innerHTML = arrdisplay;
</script>
</body>
</html>
|
The shift method
If you need to remove the array elements from beginning of an array then use javascript shift method. The shift method also returns deleted array element.
Delete element from array example by shift method
The following example deletes the element from an array by using shift method. We have created an array of four numbers. Then a variable is assigned the return value of shift javascript method. As example page loads, the alert will show removed element. The array elements are then displayed in HTML paragraph after using the shift method.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=“p1”></p>
<script type=“text/javascript”>
var NumArr = [1,2,3,4];
var i;
var arrdisplay = “The array after javascript shift: <BR>”;
var deleteelement = NumArr.shift();
alert (deleteelement);
//Array after shift
for (i=0; i < NumArr.length; i++){
arrdisplay += NumArr[i] + “<BR>”;
}
document.getElementById(“p1”).innerHTML = arrdisplay;
</script>
</body>
</html>
|
You can see, the array element is removed as demo page loads. While the array is displayed without the first removed element.
Javascript clear array example
The javascript pop and shift methods only remove the last and first element of given array, respectively. What, if you need to remove all elements of an array? Following are few ways to clear array elements.
You can use the length property of array and set the array value to 0. See example below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=“p1”></p>
<p id=“p2”></p>
<script type=“text/javascript”>
var NumArr = [1,2,3,4];
var i;
var arrdisplay = “The array before length=0: <BR>”;
for (i=0; i < NumArr.length; i++){
arrdisplay += NumArr[i] + “<BR>”;
}
document.getElementById(“p1”).innerHTML = arrdisplay;
NumArr.length=0;
var arrdisplay2 = “The array after length=0: <BR>”;
for (i=0; i < NumArr.length; i++){
arrdisplay += NumArr[i] + “<BR>”;
}
document.getElementById(“p2”).innerHTML = arrdisplay2;
</script>
</body>
</html>
|
You can see a cleared array as no elements are displayed.
You can also redefine array as blank [] if an array has no references to clear the array.
Also see Javascript Array
Leave A Comment?