デタッチで情報を削除する方法は？

Question

私は再びそれを使用することを心に持っているので、デタッチして私のウェブサイトのエリアを削除しようとしているが、これは私がHTML

<div id="container"> 
<p>Hello</p> 
</div> 
<div id="containerShow"></div> 

<a href="#" id="remove">Remove</a> | <a href="#" id="show">Show</a> 

でコーディングし、これが私のjQuery

$("#remove").click(function(){ 
    $("#container").detach(); 
}); 

$("#show").click(function(){ 
    $("#container").detach().appendTo("#containerShow"); 
}); 

は何かということです

どうすればいいですか？「削除」リンクをクリックして「表示」リンクをクリックすると、「削除」リンクをクリックするとdivコンテナが削除されます この外観は非常にシンプルですが、デタッチに関するjqueryのドキュメントは混乱していますhttp://api.jquery.com/detach/私はそれを行う簡単な方法が欲しい、私はまた、この記事を見つけたHow to I undo .detach()?しかし私はそれが私が望むように動作させません。

私のコードは内容を削除しますが、元に戻す方法はわかりません。 助けてください？

Answer 1

あなたはすなわち、変数で、どこかでそれを保持する必要があります。

var element; 

$("#remove").click(function(){ 
    element = $("#container").detach(); // detach and store in variable 
}); 

$("#show").click(function(){ 
    element.appendTo("#containerShow"); // restore stored element 
}); 

Answer 2

あなたはすでにあなたが戻ってdetachを使用して要素を取得することができない理由に対する答えを与えてきたが、これに簡単なソリューションあなたの例で説明した問題は、hideとappendToを使用することです：

$("#remove").click(function(){ 
    $("#container").hide(); 
}); 
$("#show").click(function(){ 
    $("#container").appendTo("#containerShow"); 
}); 

それはすでにこのような場合には、それはまだないDOM（中に存在する場合appendToは要素を移動しますので、これは動作しますなぜなら、実際にそれを削除するのではなく、hideを隠すだけだからです）。また、分離された要素を格納する可能性のあるグローバル変数の必要性も取り除きます。

#containerShowが戻ってコンテンツを置く場所を提供する以外何もしていない場合、あなたはそれを取り除くとだけではなく、showを使用し得ることもできます

$("#show").click(function(){ 
    $("#container").show(); 
});