Bulma Notification JavaScript Example
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"> w3wiki </h1> <b>Bulma Notification JavaScript Example</b> <div class="container is-fluid"> <div class="notification is-link mt-5"> <button class="delete"></button> <p> w3wiki is a computer science portal for Beginner by Beginner. Here you can find articles on various computer science topics like Data Structures, Algorithms and many more. w3wiki also provide courses, you can find the courses at <a href= </p> </div> <div class="notification is-primary mt-5"> <button class="delete"></button> <p> w3wiki is a computer science portal for Beginner by Beginner. Here you can find articles on various computer science topics like Data Structures, Algorithms and many more. w3wiki also provide courses, you can find the courses at <a href= </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