title: jQuery: alert removes the div tag when clicked close
body: <p>My <code>ajax</code> looks like</p>
  
  <pre><code>   // send the data to the server using .ajax() or .post()
      $.ajax({
          type: 'POST',
          url: 'addVideo',
          data: {
              video_title: title,
              playlist_name: playlist,
              url: id
              // csrfmiddlewaretoken: '{{ csrf_token }}',
          },
          done: notify('success', 'video saved successfully'),
          fail: notify('error', 'There were some errors while saving the video. Please try in a while')
      });
  </code></pre>
  
  <p><code>notify</code> looks like</p>
  
  <pre><code>function notify(notify_type, msg) {
      var alerts = $('#alerts');
      alerts.addClass('alert');
      alerts.append('&lt;a class="close" data-dismiss="alert" href="#"&gt;×&lt;/a&gt;');
      if (notify_type == 'success') {
        alerts.addClass('alerts-success').append(msg).fadeIn('fast');
      }
      if (notify_type == 'failure') {
        alerts.addClass('alerts-error').append(msg).fadeIn('fast');
      }
  }
  </code></pre>
  
  <ul>
  <li>When I save click on button I get success message as </li>
  </ul>
  
  <blockquote>
    <p>video saved successfully                                                    x(cross mark)</p>
  </blockquote>
  
  <ul>
  <li>I click cross and notification is gone now</li>
  <li><p>When I AGAIN save click on button, nothing happens, I see firebug complaining 
  <code>No elements were found with the selector: "#alerts"</code></p></li>
  <li><p>My guess is clicking on cross mark removes the <code>div="alerts"</code> tag entirely from DOM. is it correct?</p></li>
  </ul>
  
  <p><strong>Question</strong>
  - How can I get the correct behavior. clicking on cross mark removes notification div, clicking on button to create creates the notification div again</p>