title: Remove parent of a parent with jQuery and DOM
body: <p>My html looks like this :</p>
  
  <pre><code>&lt;li&gt;
      &lt;div&gt;
          &lt;p class="delete"&gt;
              &lt;a href="#"&gt;X&lt;/a&gt;
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="friend-avatar"&gt;
          &lt;img src="" /&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>After clicking anchor tag in 'delete' paragraph I'm showing a popup (using jquery-alert) and if user selects 'Yes' I would like the whole li containing this clicked a to fade out and then remove it. I was trying something like this, but the li stays visible :</p>
  
  <pre><code>$(function() {
      $(".delete a").click( function(){
          jConfirm('Remove friend?', 'Confirmation Dialog', 
          function(r){
              if(r==true){
                 parent_li = $(this).closest('li');
                 parent_li.fadeOut('slow', function() {$(this).remove();});
              }   
          });
          return false;
      });
  });
  </code></pre>
  
  <p>What am I doing wrong ?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Just noticed, that when I click this 'delete' link, firebug shows following error :</p>
  
  <pre><code>a.ownerDocument is undefined
  /site_media/jquery/jquery-1.4.2.js
  Line 117
  </code></pre>