Skip to content
Related Articles

Related Articles

Bulma Notification JavaScript Example

Improve Article
Save Article
  • Last Updated : 30 Jan, 2022
Improve Article
Save Article

Bulma is a CSS framework based on flexbox. It can be very helpful to develop websites easily as it comes with pre-styled elements and components so you don’t have to build everything from the ground up. In this article, we will be seeing how to make a notification disappear with the help of some JavaScript.

Steps to Remove the Notification on click of delete button:

  • Step 1: Select all the delete buttons which are inside the notification element and loop over them using the forEach() JavaScript method.
  • Step 2: Get the reference of notification element using parentNode property of delete button.
  • Step 3: Add a click event listener on the delete button and when the button gets clicked, remove the parent notification.

Example: The below example shows how to make the notification element disappear with a click of the delete button inside it.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Notification JavaScript Example</title>
    <link rel='stylesheet' href=
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <b>Bulma Notification JavaScript Example</b>
    <div class="container is-fluid">
        <div class="notification is-link mt-5">
            <button class="delete"></button>
            <p>
                GeeksforGeeks is a computer science 
                portal for geeks by geeks. Here you 
                can find articles on various computer 
                science topics like Data Structures, 
                Algorithms and many more.
                GeeksforGeeks also provide courses,
                you can find the courses at
                <a href=
            "https://practice.geeksforgeeks.org/courses">
            https://practice.geeksforgeeks.org/courses</a>
            </p>
        </div>
        <div class="notification is-primary mt-5">
            <button class="delete"></button>
            <p>
                GeeksforGeeks is a computer science 
                portal for geeks by geeks. Here you 
                can find articles on various computer 
                science topics like Data Structures, 
                Algorithms and many more. GeeksforGeeks
                also provide courses, you can find the 
                courses at <a href=
            "https://practice.geeksforgeeks.org/courses">
            https://practice.geeksforgeeks.org/courses</a>
            </p>
        </div>
    </div>
  
    <script>
        // Step 1: Select all the delete buttons 
        // which are inside notification element 
        // and loop over them using forEach
        document.querySelectorAll(".notification .delete")
            .forEach(function ($deleteButton) {
  
                // Step 2: Get the parent notification 
                // of the delete button
                const parentNotification = $deleteButton.parentNode;
  
                // Add click event listener on delete 
                // button and when the button get clicked
                // remove the parent notification
                $deleteButton.addEventListener('click', function () {
                    parentNotification.parentNode
                        .removeChild(parentNotification);
                });
            });
    </script>
</body>
  
</html>


Output:

Reference: https://bulma.io/documentation/elements/notification/#javascript-example


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!