Remove parent of a parent with jQuery and DOM

Question

My html looks like this :

<li>
    <div>
        <p class="delete">
            <a href="#">X</a>
        </p>
    </div>
    <div class="friend-avatar">
        <img src="" />
    </div>
</li>

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 :

$(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;
    });
});

What am I doing wrong ?

UPDATE

Just noticed, that when I click this 'delete' link, firebug shows following error :

a.ownerDocument is undefined
/site_media/jquery/jquery-1.4.2.js
Line 117

Answer 1

I'm not familiar with that plugin, but my guess is that this does not refer to the element that was clicked, but rather to the dialog.

Try referencing this in a variable outside the jConfirm().

$(function() {
    $(".delete a").click( function() {

            // reference the <a> element
        var $a = $(this);
        jConfirm('Remove friend?', 'Confirmation Dialog', 
        function(r){
            if(r==true){

                 // use a to find the closest <li>
               var parent_li = $a.closest('li');
               parent_li.fadeOut('slow', function() {$(this).remove();});
            }   
        });
        return false;
    });
});

Answer 2

Your reference to parent_li is outside the scope of the variable.

Just for interest's sake I would have changed the call back to its own function, that way I could reuse it.

$(function() {
    $(".delete a").click( function(){
        jConfirm('Remove friend?', 'Confirmation Dialog', 
        function(r){
            if(r==true){
               parent_li = $(this).parents('li');
               $(parent_li).fadeOut('slow', removeLi(parent_li));
            }   
        });
        return false;
    });
});

function removeLi(parent_li){
    $(parent_li).remove();
};

Answer 3

You should store $(this) in a variable since the scope changes inside your popup function.

Do something like:

$(function() {
    $(".delete a").click( function(){
        var $link = $(this); // Here's the magic
        jConfirm('Remove friend?', 'Confirmation Dialog', 
        function(r){
            if(r==true){
               parent_li = $link.closest('li');
               parent_li.fadeOut('slow', function() {$(this).remove();});
            }   
        });
        return false;
    });
});