Home > Article > Web Front-end > Remove last item from array using JavaScript (3 ways)
In the previous article "JavaScript restricts the input box to only allow integers and decimal points (two methods)", I introduced how to use javascript to restrict the input box to only allow integers and decimal points. Interested Friends can learn about it~
What this article will explain is to teach you how to use JavaScript to delete the last item from an array.
Below I will explain how to use JavaScript to delete the last item from an array through 3 examples:
First sample code:
Note: This example uses the splice() method to remove the last item from the array.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="text-align:center;"
id="body">
<h1 style="color:red;">
PHP中文网
</h1>
<p id="GFG_UP"
style="font-size: 16px;">
</p>
<button onclick="gfg_Run()">
删除最后一项
</button>
<p id="GFG_DOWN"
style="color:red;
font-size: 20px;
font-weight: bold;">
</p>
<script>
var el_up =
document.getElementById("GFG_UP");
var el_down =
document.getElementById("GFG_DOWN");
var array = [34, 24, 31, 48];
el_up.innerHTML = "Array = [" + array + "]";
function gfg_Run() {
array.splice(-1, 1);
el_down.innerHTML =
"删除后的数组 = [" + array + "]";
}
</script>
</body>
</html>The running results are as follows:
JavaScript Array splice() method adds/removes items to/from the array and returns The item that was removed; this method mutates the original array.
Second sample code:
Note: This example uses the pop() method to remove the last item from the array.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="text-align:center;"
id="body">
<h1 style="color:orange;">
PHP中文网
</h1>
<p id="GFG_UP"
style="font-size: 16px;">
</p>
<button onclick="gfg_Run()">
删除最后一项
</button>
<p id="GFG_DOWN"
style="color:orange;
font-size: 20px;
font-weight: bold;">
</p>
<script>
var el_up =
document.getElementById("GFG_UP");
var el_down =
document.getElementById("GFG_DOWN");
var array = [34, 24, 31, 48];
el_up.innerHTML = "Array = [" + array + "]";
function gfg_Run() {
array.pop();
el_down.innerHTML =
"删除后的数组 = [" + array + "]";
}
</script>
</body>
</html>The running results are as follows:
The JavaScript Array pop() method will delete the arrayObject , decrements the array length by 1 and returns the value of the element it removed. If the array is already empty, pop() does not modify the array and returns an undefined value.
Third code example:
Note: This example does not remove the last item from the array, instead using The slice() method returns a new array with the items removed.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="text-align:center;"
id="body">
<h1 style="color:pink;">
PHP中文网
</h1>
<p id="GFG_UP"
style="font-size: 16px;">
</p>
<button onclick="gfg_Run()">
删除最后一项
</button>
<p id="GFG_DOWN"
style="color:pink;
font-size: 20px;
font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var array = [34, 24, 31, 48];
el_up.innerHTML = "Array = [" + array + "]";
function gfg_Run() {
el_down.innerHTML =
"删除后的数组 = [" + array.slice(0, -1) + "]";
}
</script>
</body>
</html>The running results are as follows:
The JavaScript Array slice() method can return selected elements from an existing array , the slice() method can extract a certain part of the string and return the extracted part as a new string; the slice() method does not change the original array.
Finally, I would like to recommend "JavaScript Basics Tutorial" ~ Welcome everyone to learn ~
The above is the detailed content of Remove last item from array using JavaScript (3 ways). For more information, please follow other related articles on the PHP Chinese website!