布尔玛通知 JavaScript 示例

Bulma是一个基于 flexbox 的 CSS 框架。轻松开发网站非常有帮助，因为它带有预先设置样式的元素和组件，因此您不必从头开始构建所有内容。在本文中，我们将了解如何借助一些 JavaScript 使通知消失。

单击删除按钮删除通知的步骤：

• 第 1 步：选择通知元素内的所有删除按钮，并使用 forEach() JavaScript 方法遍历它们。
• 步骤 2：使用删除按钮的 parentNode 属性获取通知元素的引用。
• 第三步：在删除按钮上添加一个点击事件监听器，当按钮被点击时，删除父通知。

示例：下面的示例显示了如何通过单击其中的删除按钮使通知元素消失。

HTML

  

    Bulma Notification JavaScript Example
    

  

    
        GeeksforGeeks
    
    Bulma Notification JavaScript Example
    
        
            
            
                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
                
            https://practice.geeksforgeeks.org/courses
            
        
        
            
            
                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 
            https://practice.geeksforgeeks.org/courses
            
        
    
  
    
        // 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);
                });
            });
    

  

输出：

参考： https://bulma.io/documentation/elements/notification/#javascript-example