Bulma Notification JavaScript Example

Last Updated : 30 Jan, 2022

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= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</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://www.geeksforgeeks.org/courses"> 
            https://www.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://www.geeksforgeeks.org/courses"> 
            https://www.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> 