July 15, 2020

How to Remove First and Last Element in Array in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to remove first and last element in array in javascript. Arrays are extremely useful when it comes to storing a bunch of items. These items may or may not be of similar data type.

As you know, arrays have the 0-based index and if you know the index of a item, you can easily remove it from the array. However, when it comes to removing the first and last item, we can utilize built-in methods shift() and pop(). The shift() method will remove the first item in the array and the pop() method will remove the last item in the array.

In the following example, we have global array users and upon button click, I want to remove the first and last items. There are 2 buttons, one button is to remove the first item and another button is to remove the last item. Please have a look over the code example and steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, 2 button, and ul). The div element is just a wrapper for the rest of the elements.

The first button element has “First” and the second button element has “Last” as inner text.
The ul element is empty for now since we will populate it dynamically using javascript.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  
  <div>
    <button id="first">First</button>
    <button id="last">Last</button>
    <ul></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button {
    padding: 10px;
    display: inline-block;
}

li {
    font-size: 20px;
    font-weight: bold;
    list-style: none;
    margin-left: -40px;
}

Javascript

We have a global variable users and it holds an array of strings.

We have the addUsers() method which is responsible for populating our ul element.
In addUsers() method, we are simply looping through the users array and creating a template string with a bunch of li elements.
We are displaying that list in the ul element.

We have selected both the button elements by their ids using the document.querySelector() method and stored them in btnFirst and btnLast variables.
We have attached the click event listener to the button elements.
In the event handler function of the first button, we are removing the first item using the shift() method and updating the list of users.

In the event handler function of the second button, we are removing the last item using the popup() method and updating the list of users.

let users = ['Marks', 'Peter', 'James', 'Mary', 'Ronald'];

function addUsers(){
    let template = users.map(user => `<li>${user}</li>`).join('\n');
    document.querySelector('ul').innerHTML = template;
}

addUsers();

let btnFirst = document.querySelector('#first');
let btnLast = document.querySelector('#last');


btnFirst.addEventListener('click', () => {
    users.shift();
    addUsers();
});

btnLast.addEventListener('click', () => {
    users.pop();
    addUsers();
});

You May Also Like: