July 7, 2020

How to Remove All Items from Array in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to remove all items from an array in javascript. As you already know, there are numerous built-in methods for arrays to add or remove items. Emptying an array is pretty much like emptying a box full of items.

There are numerous ways to delete all items in an array. Some of them involve looping through an array and removing each item one by one, but I will show you one efficient way to accomplish this with one line of code.

In the following example, we are displaying all items in an array as well as the length of the array and upon click of a button, we are removing all items from the array which in turn will display nothing on the webpage and the length will become 0. Please have a look over the code example and steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, button, h1, and ul). The div element is just a wrapper for the rest of the elements.
The inner text for the button element is “Remove” and for the h1 element is “Length”.
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>Remove</button>
    <ul></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

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

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

Javascript

We have a global variable users and it holds an array of strings as well as null or undefined elements.
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 and its length in the h1 element.
We have selected a button using the document.querySelector() method and stored it in btnRemove variable.
We have attached the click event listener to the button element.
In the event handler function, we are simply assigning an empty array ([]) to users variable and calling addUsers() method to update the output on the screen.
Since the array is empty, there will be no list items and the length will become 0.

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

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

addUsers();

let btnRemove = document.querySelector('button');

btnRemove.addEventListener('click', () => {
    users = [];
    addUsers();
});

You May Also Like: