Question

我有一个消失的删除动画代码，我想让整个div“parent_parent”消失。

这是HTML

<div class="parent_parent">
    <div class="parent">
        <a href="?delete=1" class="delete_link"></a>
    </div>
</div>

这是jquery代码的一部分，它使parent_parent div消失：

$(document).ready(function() {
    $('a.delete_element').click(function(e) {
        e.preventDefault();
        var parent = $(this).parent();
        $.ajax({
            type: 'get',
            url: 'delete.php',
            data: 'ajax=1&delete=' + parent.parent().attr('id').replace('sort_', ''),
            beforeSend: function() {
                parent.parent().animate({
                    'backgroundColor': '#fff'
                }, 300);
            },
            success: function() {
                parent.parent().slideUp(300,function() {
                parent.parent().remove();
                });
            }
        });
    });
});

但到目前为止还没有动画发生，但如果我只是调用一个父节点，那么内部div就会消失。我也没有收到任何错误消息。

Answer 1

您的代码对于您要执行的操作仍然过于复杂。这样更好：

// $(function(){ is shorthand for $(document).ready(function(){
$(function() {
    $('a.delete_element').click(function(e) {
        e.preventDefault();
        // Don't give thing ambiguous names like 'parent'
        // You should change your class names too.
        var container = $(this).closest(".parent_parent");
        $.ajax({
            type: 'get',
            url: 'delete.php',
            // You had multiple instances of parent.parent(), but no direct usage of parent alone
            // This is a clue that you can simplify parent.parent() since you are traversing to the same element every time
            data: 'ajax=1&delete=' + container.attr('id').replace('sort_', ''),
            beforeSend: function() {
                containter.animate({
                    'backgroundColor': '#fff'
                }, 300);
            },
            success: function() {
                container.slideUp(300, function() {
                    // Do not repeat the same selector within a callback
                    // That's what `this` is for
                    $(this).remove();
                });
            }
        });
    });
});

如果按原样使用此代码示例，它将起作用。

Answer 2

您可能没有阻止默认的锚标记操作。您可能还希望缓存多次使用的引用。这是工作代码：

function(e) {
    e.preventDefault();
    var theParent = $(this).closest(".parent_parent");    
    theParent.slideUp(300, function() {
        theParent.remove();
    });
};

小提琴：http://jsfiddle.net/VXEUM/

另请注意，我使用的是closest()，而不是加倍parent()。只是一种风格偏好。另外，如果您的元素嵌套得更深，它仍然可以使用closest()。

使用JQuery获取父级的父级

2 个答案: