jquery .remove ne fonctionne pas comme prévu

Question

J'ai ce qui suit qui est censé supprimer l'élément ".mycontainer" lorsque je clique sur un bouton de fermeture. Cela ne supprime pas l'élément. Quand j'utilise firebug. Je peux voir que c'est juste le déplacer à l'extérieur des balises html au début du code.

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

Il fonctionne si je commente la 3ème ligne //$(".closeButton").parent().appendTo(".ContentsHolder");

mais cela supprime le contenu, donc je ne peux pas accéder à nouveau.

EDIT:

Mon html ressemble à quelque chose comme ça si elle aide à comprendre ce que je fais ...

<div class='ContentsHolder'> 

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

J'ai aussi réussi à le faire fonctionner en mettant un retard sur la suppression de mycontainer $(this).delay(500).remove();

Je ne pense pas que ce soit une bonne solution.

Answer 1

J'ai résolu même problème avant comme celui-ci:

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

Answer 2

Vous pouvez tout simplement enchaîner la fonction de suppression après la slideUp comme ceci:

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

Answer 3

Il ressemble à $(this) est un contexte différent de ce que vous pensez. Essayez d'ajouter console.log($(this)); pour voir le contexte réel dans la console.

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