jquery - Dismissing alerts created using an event of twitter bootstrap -

i trying learn jquery , twitter bootstrap. have 2 kinds of alerts:

1. alert upon page load
2. alert based on action (button click) in simple example.

pressing 'x' on alert created page load clears it. same not happen 1 loaded button. missing in script?

<div class="container">     <div class="row">         <div class="span12">              <div id="alert-section" class="alert alert-success">                 <button type="button" class="close" data-dismiss="alert">&times;</button>                 <h4>page load alert!</h4>                 alert displayed when page loads.             </div>              <button type="button" id="btn-alert" href="#">open alert</button>              <div id="le-alert"></div>          </div>     </div> </div>      $('#btn-alert').click(function () {       $('#le-alert').addclass('alert in');         $('#le-alert').append('<button type="button" class="close" data-dismiss="alert">&times;</button><h4>alert title</h4><p>this alert dispalyed on button click</p>');     });      $('.close').click(function () {       $(this).parent().removeclass('alert in');       $(this).parent().empty();     }); 

code demo: http://jsfiddle.net/hgeun/

when use 'data-dismiss' attribute in button, , close button first time, complete element disappears , not see element again, until reload/refresh page. remove data-dismiss attribute, if wish see alert pop-up repeatedly without page refresh.

use jquery's hide() method close alert, rather removing document object model. refer this, twitter bootstrap alert message close , open again same problem.

for example -

<div class="alert alert-success fade in">         <button type="button" class="close">&times;</button>         <strong>sucess!</strong> values updated!! 

the javascript close button -

$('.close').click(function () {     $(this).parent().removeclass('in'); // hides alert bootstrap css3  });