July 7, 2020

How to Remove Empty Elements from Array in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to remove empty elements from an array in javascript. By empty elements, I simply mean null or undefined elements. If you are adding elements dynamically in an array, then there is a possibility that you might end up adding null or undefined elements.

There are various ways to remove empty elements from an array. But we will go with one of the simplest ways to achieve this and that is by filter() method. filter() method is used to filter array elements based on certain conditions. We are going to use this method to detect null or undefined elements in an array.

In the following example, we have one global array which contains 2 null and undefined elements. We will use the filter() method to filter the array and display a list of elements in our filtered array as well as its length.

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>
    <h1>Length</h1>
    <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-weight: bold;
    font-size: 20px;
    list-style: none;
    margin-left: -40px;    
}

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 using the filter() method to filter out null or undefined elements. In javascript, both null and undefined are equal when you compare them with the equality operator (==).
The filtered array is being reassigned to users variable and we are calling addUsers() method to display our elements from the filtered array along its length.

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

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

addUsers();

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

btnRemove.addEventListener('click', () => {
    users = users.filter(user => user !=  null);
    addUsers();
});

You May Also Like: