<!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
=
</
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
=
</
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
>