使用 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 单击 a 淡出，然后删除它。我正在尝试这样的事情，但李仍然可见：

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

我做错了什么？

更新

刚刚注意到，当我单击此“删除”链接时，firebug 显示以下错误：

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

Answer 1

我不熟悉该插件，但我的猜测是 this 并不是指被单击的元素，而是指对话框。

尝试在jConfirm()外部的变量中引用this。

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