CODEWITHSUNDEEP
jqueryjquery-ui
Jon
Jon

Reputation: 40032

Why does my jQuery fadeOut/remove get rid of the parent DOM element?

I have a list of items for example:

<li class="ui-state-default" ><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>test <a href="#" title="Delete" class="itemDelete">x</a></li>

$('.itemDelete').live("click", function() {

                $(this).parent().remove();
            });

All is ok. If I change it to 

$(this).parent().fadeOut("slow", function() { $(this).parent().remove(); });

It seems to remove the <li> ok but also the <li> above it. I've tried running the fade then the remove on separate lines but that appears to the user as if its just done a remove and not the fade.

Any ideas?

Upvotes: 1

Views: 1483

Answers (2)

chaos
chaos

Reputation: 124267

It's an issue of what this refers to — in the callback, this is your faded element. You want:

$(this).parent().fadeOut("slow", function() { $(this).remove(); });

Upvotes: 2

Philippe Leybaert
Philippe Leybaert

Reputation: 171734

You're removing the parent's parent. Change it to:

 $(this).parent().fadeOut("slow", function() { $(this).remove(); });

Upvotes: 2

Related Questions