As you may know, I am using the Bulma flexbox css framework for my personal Ghost theme.

As part of the framework, there are notifications and the framework also provides the ability to include a delete button for the notification, but it is completely static and doesn't do anything - yet.

I also had to add some CSS to fix the button for the notification:

.notification > button.delete {
  border: none;
} 

which is strange as it seems fine on the Bulma site.

In addition to this, I added a new modifier class in the naming convention of the existing classes:

.is-hidden {
  display: none;
}

This class is then applied to the notification when the delete button is clicked.

To achieve that in jQuery, you can simply use this:

$(document).on('click', '.notification > button.delete', function() {
    $(this).parent().addClass('is-hidden');
    return false;
});

You could optionally remove the element from the DOM completely by chaining the .remove() method, e.g.

$(this).parent().addClass('is-hidden').remove();

See the Pen Bulma CSS Framework - Add Functionality to Dismiss Notifications by Martin Carlin (@martincarlin87) on CodePen.