Question

I have an disappearing delete animation code and I want to get the entire div “parent_parent” to disappear.

Here is the HTML

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

And here is part of the jquery code that makes the parent_parent div disappear:

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

But so far no animation happens, but if I just call one parent then the inside div does disappear. I don’t get any error messages either.

Answer 1

Your code is still too complicated for what you are trying to do. This is better:

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

If you use this code example as it is, it will work.