@भि कहिन

my personal web log

Problem with jQuery fadeOut with remove

Posted by @bhitalks on March 29, 2010

I faced this peculiar problem when trying to remove an element from DOM after fading it out. Ditto for slideUp or other similar methods.

This is what I was trying to do;

$('#elem').fadeOut('slow', function() { $('#elem').remove(); });

But this wasn’t working out as expected. It should have removed the element from the DOM after it finished fadeOut on the element. But to my frustation, it wouldn’t. The element was very much there albeit hidden owing to its display set to ‘none’ courtesy fadeOut.

As usual, my first saviour being Google, I googled. Only to find the same snippet (as above) being suggested on several sites!

After much struggling with it, found out that I was attempting to remove the element within the context, which in effect was failing.

The correct way would be to call the method on the context reference, i.e. ‘this’. So the technique becomes:

$('#elem').fadeOut('slow', function() { $(this).remove(); });

And this works like a charm!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: