javascript - 完全删除 div 并再次添加

Question

我需要通过单击相同的 div 删除一个 div（#pop1）并通过单击其他 div（#pop2）再次添加该 div，并且需要删除该 div（#pop2）。

检查我的演示

我编写了删除 div 的代码，但如何再次添加它。

$(".del").click(function(){
   $(this).parent().remove();     
})

Answer 1

这是[演示]。.player由于del班级太小，我已将其绑定在班级上。你可以相应地改变它！

$(".player").bind('click', function(){
    $('.player').show();
   $(this).hide();     
})

Answer 2

喜欢评论的建议之一，.hide()如果.show()您想隐藏和显示div

但是，如果您想稍后再附加它，remove请div使用全局变量来保存div

var $div=$(".del"); \\ the global variable

然后在使用您的.remove()代码删除它之前添加$div=$(".del").

然后你可以使用它来附加div到父元素$("#parentDiv").append($div)

PS：现在无法在我的网络中访问您的小提琴，因此无法发布更新的小提琴

Answer 3

这可能是你所追求的：

<script type="text/javascript">
$(function(){
var cached = null;

$(".del").click(function(){
    if(cached != null){
     $('body').prepend(cached);   
    }
   cached = $(this).parent().detach();
})
});
</script>

注意：删除您内联编写的点击处理程序：

<a class="del" href='#' onclick="remove('rem')" ><div id="pop3"></div></a>