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没有引用被点击的元素，而是引用对话框。

尝试在外的 {/ 1}}中引用this。

jConfirm()

Answer 2

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

Answer 3

您应该将$（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;
    });
});

使用jQuery和DOM删除父级的父级

3 个答案: