How to prevent jQuery’s close function from destroying my message container?

Question

When I click the close icon of the error message, the Bootstrap javascript function simply destroys the container #msg receiving error messages preventing the next time an error occurs the container does not appear with the message because it no longer exists in the first close-up.

    ...
    msg         = '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
    msg         += '<strong>Atenção! </strong>Todos os campos precisam ser preenchidos.';

    // Verificando se todos os dados foram inseridos
    if((username == '' || username == null) || 
       (password == '' || password == null)){
        $('#msg').empty();
        $('#msg').removeClass('hidden').append(msg);
        return false;

    } else {
    ...

Question: How can I get around this problem?

Answer 1

Let’s say I have an html like this:

<div id="resposta"></div>

I could solve this alert problem by removing everything with Empty() and then adding the alert string,in the following example you will see a function called msg that you just need to inform the alert and the text you want to inform the user.

Example:

   function msg(alerta, texto) {
     var resposta = '';
     $("#resposta").empty();
     if (alerta === 'sucesso') {
       resposta = "<div class='alert btn-success text-center' role='alert'>" +
         "<a href='#' class='close' data-dismiss='alert' aria-label='Close'>&times;</a>" +
         texto + "</div>";
     } else if (alerta === 'atencao') {
       resposta = "<div class='alert btn-warning text-center' role='alert'>" +
         "<a href='#' class='close' data-dismiss='alert' aria-label='Close'>&times;</a>" +
         texto + "</div>";
     } else if (alerta === 'erro') {
       resposta = "<div class='alert btn-danger text-center' role='alert'>" +
         "<a href='#' class='close' data-dismiss='alert' aria-label='Close'>&times;</a>" +
         texto + "</div>";
     }
     $("#resposta").append(resposta);

     $(".alert").click(function() {
       $(".alert").hide();
     });
   }

   $("#success").click(function() {
     msg('sucesso', 'Configuracoes salvas com sucesso.');
   });

   $("#warning").click(function() {
     msg('atencao', 'Preencha o campo XXXX por favor.');
   });
   $("#danger").click(function() {
     msg('erro', 'Error Tem alguma coisa errada que nao esta certa.');
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<br>
<br>
<div class="col-xs-4">
  <button class='btn btn-success btn-block' id='success'>success</button>
</div>
<div class="col-xs-4">
  <button class='btn btn-warning btn-block' id='warning'>warning</button>
</div>
<div class="col-xs-4">
  <button class='btn btn-danger btn-block' id='danger'>danger</button>
</div>
<br>
<br>
<br>
<div id="resposta"></div>