title: Hide parent div on click using jQuery
body: <p>So I'm trying to write a super simple script that will allow a user to throw any link or button with the class <code>.close</code> inside of a div, and when that <code>.close</code> link is clicked, it automatically closes the parent container. </p>
  
  <p>Here is what I'm currently trying to work with: <strong><a href="http://jsfiddle.net/6Xyn4/" rel="noreferrer">JSFiddle</a></strong></p>
  
  <p>The code that I am currently trying to use is: </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="well notice bg-green"&gt;
      &lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
      &lt;p&gt;This is a notice that is green.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.well {
      background: #f9f9f9;
      border-color: #f1f1f1;
      border-style: solid;
      border-width: 1px;
      padding: 15px 20px;
  }
  .notice {
      margin: 15px 0;
      padding: 0px 15px;
  }
  .well.bg-green {
      background: #dff0d8;
      border-color: #d6e9c6;
      color: #468847;
  }
  .close {
      color: #000;
      filter: alpha(opacity=20);
      float: right;
      font-size: 21px;
      font-weight: bold;
      line-height: 1;
      margin-top: 15px;
      opacity: .2;
      text-shadow: 0 1px 0 #fff;
  }
  .close:hover, .close:focus {
      color: #000;
      cursor: pointer;
      filter: alpha(opacity=50);
      opacity: .5;
      text-decoration: none;
  }
  button.close {
      background: transparent;
      border: 0;
      cursor: pointer;
      padding: 0;
      -webkit-appearance: none;
      -moz-appearance: none;
  }
  </code></pre>
  
  <p><strong>JavaScript (jQuery)</strong></p>
  
  <pre><code>$('.close').live("click", function () {
      $(this).parents('div').fadeOut;
  });
  </code></pre>
  
  <p>Let me know if my question doesn't make sense or if any more elaboration is needed. Thank you!</p>