如何获得信息与分离删除

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的doc关于分离是困惑http://api.jquery.com/detach/和我想要一个简单的方法来做到这一点，我也发现这篇文章在这里我如何撤消。detach()?但我没有让它像我想的那样工作。

我的代码删除我的内容很好，但我不知道如何得到它回来。

Answer 1

您已经得到了为什么不能使用detach获得元素的答案，但是您的示例中描述的问题的更简单的解决方案是使用hide和appendTo:

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

这是有效的，因为appendTo将移动一个元素，如果它已经存在于DOM(在这种情况下，它仍然这样做，因为hide只是隐藏它，而不是实际删除它)。它还不需要潜在的全局变量来存储分离的元素。

如果#containerShow除了提供一个放内容的地方之外没有做任何事情，你可以摆脱它，只使用show代替:

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

Answer 2

你必须把它保存在某个地方，即在一个变量中:

var element;
$("#remove").click(function(){   
   element = $("#container").detach(); // detach and store in variable
});
$("#show").click(function(){   
   element.appendTo("#containerShow"); // restore stored element
});