view raw
Kleber Mota Kleber Mota - 10 months ago 38
jQuery Question

Hide alert when click on close button instead remove it

In my page, the response from server is displayed using this alert:

<div id="yes" class="alert alert-success" role="alert" style="display: none;">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Pronto!</strong> cadastro efetuado com sucesso!

Is there any way to when I click in the close button from the alert, it be hide instead removed from page? I try this (following instructions from here), without success:

$('#my-alert').on('', function () {


I also try this:

$('button.close').on("click", function(){

but still the same problem, when I click in the close button, the alert is removed.


Solution I found for this problem:

Create a new data attribute for hiding an element.


    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide();
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide();

and then change data-dismiss to data-hide in the markup. Example at jsfiddle.

$("." + $(this).attr("data-hide")).hide();

This will hide all elements with the class specified in data-hide, i.e: data-hide="alert" will hide all elements with the alert class.

based on the answer posted in this topic: Twitter Bootstrap alert message close and open again