jQuery, trying to remove a hidden div after x seconds?

Question

Hey there, I am trying to have a div "hide", then "remove" once the hide animation is finished. It seems I can get either to work, but not both. I have tried using the setTimeout, but this only results in the div getting hidden, but not actually removed.

Here is the code:

$(this).parents("div:eq(0)").hide("fast");
setTimeout(function () { $(this).parents("div:eq(0)").remove();}, 1000);

If I do the remove without the setTimeout, it removes the div, but does not display the hide animation.

Any help appreciated!

Answer 1

I believe it's a scoping issue. When your setTimeout() function runs, the context of this is different inside the function than what it was when you declared it.

Try this:

var self = $(this).parents("div:eq(0)");
self.hide("fast");
setTimeout(function () { self.remove();}, 1000);