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