Удалить родительский родитель с JQuery и DOM

Question

Мой HTML выглядит так:

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

После нажатия на метку привязки в абзаце «удалить», я показываю всплывающее окно (используя jquery-alert), и если пользователь выбирает «Да», я бы хотел, чтобы весь li, содержащий этот щелчок, исчезал, а затем удалял его. Я пытался что-то вроде этого, но ли остается видимым:

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

Что я делаю не так?

UPDATE

Только что заметил, что когда я нажимаю эту ссылку «удалить», firebug показывает следующую ошибку:

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

Answer 1

Я не знаком с этим плагином, но я предполагаю, что this относится не к элементу, на который щелкнули, а к диалогу.

Попробуйте сослаться на this в переменной снаружи 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

Вы должны хранить $ (this) в переменной, так как область видимости внутри вашей всплывающей функции меняется.

Сделайте что-то вроде:

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

Answer 3

Ваша ссылка на parent_li находится вне области действия переменной.

Ради интереса я бы изменил обратный вызов на его собственную функцию, чтобы я мог повторно использовать его.

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