Home >Web Front-end >JS Tutorial >Remove last item from array using JavaScript (3 ways)

Remove last item from array using JavaScript (3 ways)

藏色散人Original: 2021-08-26 15:15:3910909browse

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:

GIF 2021-8-26 星期四下午 3-02-06.gif

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:

GIF 2021-8-26 星期四下午 3-04-00.gif

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:

GIF 2021-8-26 星期四下午 3-07-32.gif

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!

JavaScript Array 字符串 undefined

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript restricts the input box to only allow integers and decimal points (two methods)Next article：JavaScript restricts the input box to only allow integers and decimal points (two methods)

See more

Remove last item from array using JavaScript (3 ways)

Related articles