Remove array elements in JavaScript

How to remove elements of an array in JavaScript?

In previous posts, we learnt about array sorting and adding elements in JavaScript

Array Pop

The Array pop {pop() method} in JavaScript removes the last element of an array and returns that element. This method changes the length of an array by returning the new array after removing the last element. The Array pop is usually called as pop() method in JavaScript.

NOTE: The Array pop returns output as 'undefined' for an empty array.

In JavaScript, by using pop() method we can remove the last element of an array.

EXAMPLE: Removing the last country name of an array.

<p>Click the button to remove tha last country name of an array.</p>
<button onclick="myFunction()">Click</button>
<p id="myId"></p>

<script>
    var a = ["India", "Pakisthan", "Bangladesh", "China"];
    document.getElementById("myId").innerHTML = a;

    function myFunction() {
        a.pop();
        document.getElementById("myId").innerHTML = a;
    }
</script>

In the above code snippet we have given Id as "myId"to the second <p> element in the HTML code. There is a function myFunction() in the<script>block which is connected to the onclick of the HTML button and array with value "["India", "Pakisthan", "Bangladesh", "China"]" to the variable a. We need to remove the last element (Country name) of an array, for that we are using Array pop or pop() method in the <script> block. Onclick of the button "Click" in the HTML code fires the function myFunction() in the <script> block, at the same time Array pop or pop() method removes the last element (country name) of an array and return that array as output.

OUTPUT

The above output is showing the full length array.

The above output is showing an array after removing the last element.

EXAMPLE: Removing the last number of an array.

<p>Find the odd one out and click the button to remove tha last number of an array.</p>
<button onclick="myFunction()">Click</button>
<p id="myId"></p>

<script>
    var a = [65, 85 ,25, 15, 83];
    document.getElementById("myId").innerHTML = a;

    function myFunction() {
        a.pop();
        document.getElementById("myId").innerHTML = a;
    }
</script>

Removing Last number of an Array

Onclick of the button "Click" in the HTML code fires the function myFunction() in the <script> block, at the same time Array pop or pop() method removes the last number of an array and return that array as output.

OUTPUT

The above output is showing the full length array.

The above output is showing an array after removing the last number.

Array Shift

The Array shift {shift() method} in JavaScript removes the first element of an array and returns that element. This method changes the length of an array by returning the new array after removing the first element. The Array shift is usually called as shift() method in JavaScript.

NOTE: The Array shift returns output as 'undefined' for an empty array.

In JavaScript, by using shift() method we can remove the first element of an array.

EXAMPLE: Removing the first country name of an array.

<p>Click the button to remove tha first country name of an array.</p>
<button onclick="myFunction()">Click</button>
<p id="myId"></p>

<script>
    var a = ["India", "Pakisthan", "Bangladesh", "China"];
    document.getElementById("myId").innerHTML = a;

    function myFunction() {
        a.shift();
        document.getElementById("myId").innerHTML = a;
    }
</script>

Removing first element of an array

In the above code snippet we have given Id as "myId"to the second <p> element in the HTML code. There is a function myFunction() in the<script>block which is connected to the onclick of the HTML button and array with value "["India", "Pakisthan", "Bangladesh", "China"]" to the variable a. We need to remove the first element (Country name) of an array, for that we are using Array shift or shift() method in the <script> block. Onclick of the button "Click" in the HTML code fires the function myFunction() in the <script> block, at the same time Array shift or shift() method removes the first element (country name) of an array and return that array as output.

OUTPUT

The above output is showing the full length array.

The above output is showing an array after removing the first element.

EXAMPLE: Removing the first number of an array.

<p>Find the odd one out and click the button to remove tha last number of an array.</p>
<button onclick="myFunction()">Click</button>
<p id="myId"></p>

<script>
    var a = [83, 65, 85, 25, 15];
    document.getElementById("myId").innerHTML = a;

    function myFunction() {
        a.shift();
        document.getElementById("myId").innerHTML = a;
    }
</script>

Removing first number of an array

Onclick of the button "Click" in the HTML code fires the function myFunction() in the <script> block, at the same time Array shift or shift() method removes the first number of an array and return that array as output.

OUTPUT