jquery .remove not working as expected

I have the following which is supposed to remove the element ".mycontainer" when I click on a close button. It's not removing the element though. When I u开发者_如何学Gose firebug. I can see that it is just moving it to outside of the html tags at the beginning on the code.

    $('.closeButton').click( function() {
       $(".mycontainer").slideUp( function() {
           $(".closeButton").parent().appendTo(".ContentsHolder");        
           $(this).remove();
       });
    });

It works if I comment out the 3rd line //$(".closeButton").parent().appendTo(".ContentsHolder");

but this removes the content so I can't access it again.

EDIT:

My html looks something like this if it helps to understand what I'm doing...

<div class='ContentsHolder'>

</div>
<div class='mycontainer'>
    <div class='myContent'>
        <a class='closebutton'>close</a>
        ... other content ...
    </div>
</div>

I have also managed to make it work by putting a delay on the removal of mycontainer $(this).delay(500).remove();

I would not think this is a great solution though.

---

You could just chain the remove function after the slideUp like so :

 $('.closeButton').click( function() {
       $(".mycontainer").slideUp( function() {
           $(".closeButton").parent().appendTo(".ContentsHolder");        
       }).remove();
    });

---

I have solved same problem before like this:

$(".mycontainer").slideUp(500, function() { 
    $(this).remove(); 
});

---

It looks like $(this) is a different context to what you think.

Try adding console.log($(this)); to see the actual context in the console.

$('.closeButton').click( function() {
    $(".mycontainer").slideUp( function() {
        $(".closeButton").parent().appendTo(".ContentsHolder");
        console.log($(this));
        $(this).remove();
    });
});