July 10, 2020

How to Remove Particular Element from Array in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to remove particular element from array in javascript. As you know, arrays can contain duplicate items so removing an element based on the value is not the right approach.

Arrays have a 0-based index. This means each item in the array has its unique index number and the index of the first item will always be 0. However, a point to be noted here is that the index of an item may or may not change depending upon the kind of mutation.

From the above details, it is clear that if you know the index number of an item, you can modify its value or completely remove it from the array. There are various methods to modify an array. Since we just want to remove an item, we will make use of the delete operator.

In the following example, we have a global variable users and that holds an array. In the input element, we will enter a user name and try to find the index of it in the array. Then, we will use that index to remove that element from the array. Please have a look over the code example and steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, button, input, and ul). The div element is just a wrapper for the rest of the elements.
The inner text for the button element is “Remove”.
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>
    <input type="text">
    <button>Remove</button>
    <ul></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button, input {
    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.
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 button and input elements using the document.querySelector() method and stored them in btnRemove and input variables respectively.
We have attached the click event listener to the button element.
In the event handler function, we are passing the value of the input element to the indexOf method to find its index in the array.
If no element matches the value entered in the input element, we will get -1 in return. In that case, we will do nothing.
But if there is a matching element, we will get its index number. We will use the delete operator to remove that element and update our list by calling addUsers() method.

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

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

addUsers();

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

btnRemove.addEventListener('click', () => {
    let index = users.indexOf(input.value);
    if(index != -1 ){
        delete users[index];
        addUsers();
    }
});

You May Also Like: