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

Question

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?

Answer 1

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

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