Hide alert when click on close button instead remove it

Question

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

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('close.bs.alert', function () {
  $(this).hide();
})

UPDATE

I also try this:

    $('button.close').on("click", function(){
        $(this).parent().hide();
    });

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

Answer 1

Use the bootstrap close.bs.alert event:

$('.alert').on('close.bs.alert', function (event) {
    event.preventDefault();
    $(this).addClass('hidden');
  });

Answer 2

I have tried these solutions, but not working for me. You can do it with simply remove "data-dismiss" attribute from your markup and create new function :

    $('.alert').on('click','.close',function(){
        $(this).closest('.alert').slideUp();
   });