How to Close List Items with JavaScript?

Last Updated : 22 Aug, 2024

Closing list items dynamically with JavaScript involves creating a user interface where each list item has a button or an icon that allows the user to remove that particular item from the list. Basically this is commonly seen in task in task management applications shopping lists and other similar UIs where Items can be added and removed by the user. In this article, we explain about how to add and remove items from the list dynamically. Below we provide that information for reference with related examples and outputs.

Output Preview

Prerequisites

These are the approaches to close list items with JavaScript

First we create a basic User Interface for adding Items to the list by using JavaScript and Bootstrap.
After this on click on add item button we added one list of item to item dynamically.
In same way if you want to remove any item from the list then click on X symbol of a particular item it will be removed from the List of items dynamically.
Once Development is completed. Now this HTML file through any browser then you can the output.

Example

Below is a example demonstrating adding Items to the list by using JavaScript and Bootstrap.In which when you click on add item button we added one list of item to item dynamically.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0">
    <link href="
    https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
     rel="stylesheet">
    <script src="
    https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
    <title>Close List Items</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        li {
            margin: 5px 0;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            position: relative;
            font-weight: 700;
        }

        .close {
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: pointer;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="container mt-5 p-5 bg-success" style="max-width: 1000px;">
        <h3 class="mb-4 mt-2 text-center text-light">List of Items</h3>
        <ul id="myList">

        </ul>
        <button id="addItem" class="btn btn-light mt-3"
                style="font-weight: bold;">Add Item</button>
    </div>

    <script>
        // Function to attach close functionality to all close buttons
        function attachCloseFunctionality() {
            const closeButtons = document.querySelectorAll('.close');

            closeButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const listItem = this.parentElement;
                    listItem.remove();  // Remove the list item from the DOM
                });
            });
        }

        // Function to add a new list item
        function addNewItem(text) {
            const li = document.createElement('li');
            li.textContent = text;

            const span = document.createElement('span');
            span.textContent = '\u00D7'; // Unicode for '×'
            span.className = 'close';

            li.appendChild(span);
            document.getElementById('myList').appendChild(li);

            // Attach event listener to the new close button
            span.addEventListener('click', function () {
                li.remove();  // Remove the list item from the DOM
            });
        }

        // Initial call to attach close functionality
        attachCloseFunctionality();

        // Event listener for adding a new item
        document.getElementById('addItem').addEventListener
        ('click', function () {
            addNewItem('Item');
        });
    </script>
</body>

</html>

Output:

Conclusion

Dynamically closing list items in JavaScript can be implemented using various approaches depending on the complexity of the application and the need for maintainability. For simple tasks, using inline JavaScript with event listeners or event delegation is sufficient. For larger applications leveraging a framework like React provides better state management and scalability.

JavaScript - How to Create Dropdown List?

myartic07g9

Improve

Article Tags :

How to Close List Items with JavaScript?

Output Preview

Prerequisites

These are the approaches to close list items with JavaScript

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?