2

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.

Improve this question
16
  • 1
    Not sure if its your issue or a miscopy but you are missing a . between the last parent() and slideUp. Commented Apr 5, 2012 at 2:11
  • Yes, it was miscopying! Thanks for catching that. Commented Apr 5, 2012 at 2:13
  • 1
    Also, in your callback function, parent isn't defined. You need $(this), and then a reference to what you want. Commented Apr 5, 2012 at 2:13
  • @SimpleCoder nice, I bet thats the issue. Should post that as an answer. Commented Apr 5, 2012 at 2:14
  • 1
    Good. However, I'd suggest that you give each div its own ID. That way, you don't need to mess with parent() and classes. Commented Apr 5, 2012 at 2:25

2 Answers 2

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I'm not even getting the slide up animation, let alone the remove. It's saddening.
I think you need to give us some context here. success is probably a callback on an Ajax operation. Please post the code that uses success, since that will determine what the first this refers to
Don't know why I missed this when I posted my response, but I like it. Caching the original parent jQuery object will also work, but since the performance would be trivially different I think it would boil down to style preference more than anything!
Apparently he does cache the parent object in parent, though at this point I'm not sure what it refers to.
Well, that original question has been edited so many times it's hard to tell what was there and what's the result of suggestions by us. ;-) I don't think it was originally there.
|
1

You are probably not preventing the default anchor tag action. You probably also want to cache references that you're going to use multiple times. Here's working code:

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

Fiddle: http://jsfiddle.net/VXEUM/

Note also that I'm using closest() instead of doubling up on parent(). Just a style preference. Plus if your element gets nested more deeply it will still work using closest().

Improve this answer

2 Comments

Updated my response; might still be helpful to you to show caching a jQuery object that is reused. Glad it's working. What was the solution? You can post an answer to your own question and even accept it so that someone stumbling on this question could learn. :-)
I will, but I don't have 100 rep so I have to wait like 18 hours.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.