title: Closing bootstrap alert with jQuery not working with this code?
body: <p>I have this div:</p>
  
  <pre><code>&lt;div class="alert alert-danger alert-dismissible" role="alert" id="login-error"&gt;
      &lt;button type="button" class="close" id="close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
      Incorrect username or password.
  &lt;/div&gt;
  </code></pre>
  
  <p>which is hidden on page load with this:</p>
  
  <pre><code>$(document).ready(function(){
  $('#login-error').hide();
  });
  </code></pre>
  
  <p>I want to hide it when the user clicks the close button contained within the alert (it's shown when incorrect login details are supplied using .show();).</p>
  
  <p>To do that I have this code from another Stackoverflow post:</p>
  
  <pre><code>$('.alert .close').on('click', function(e) {
  $(this).parent().hide();
  });
  </code></pre>
  
  <p>However, clicking the close button does not hide it and I have no idea why. If anyone could explain to me why it doesn't work so I can fix it that would be great :) Thanks.</p>