javascript - 删除 DOM 并再次添加回来

Question

我有一个简单的 JS 函数，可以在单击“过滤器菜单”时删除某些类。问题是我不知道如何在单击“全部”后显示那些已删除的类，即

我不能使用 display:none、opacity:0 或 visibility:hidden，我需要完全删除 DOM。

感谢您的帮助。

$(document).on("click",".all",function(){$(".campaign,.editorial,.lookbook,.portrait").appendTo("body")})
$(document).on("click",".cam",function(){$(".editorial,.lookbook,.portrait").detach()})
$(document).on("click",".edi",function(){$(".campaign,.lookbook,.portrait").detach()})
$(document).on("click",".loo",function(){$(".campaign,.editorial,.portrait").detach()})
$(document).on("click",".por",function(){$(".campaign,.editorial,.lookbook").detach()})

.all,.cam,.edi,.loo,.por {cursor:pointer}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=all>All</div>
<div class=cam>Campaign</div>
<div class=edi>Editorial</div>
<div class=loo>Lookbook</div>
<div class=por>Portrait</div><br>

<div class=campaign>CAMPAIGN</div>
<div class=editorial>EDITORIAL</div>
<div class=lookbook>LOOKBOOK</div>
<div class=portrait>PORTRAIT</div>
<div class=campaign>CAMPAIGN</div>
<div class=editorial>EDITORIAL</div>
<div class=lookbook>LOOKBOOK</div>
<div class=portrait>PORTRAIT</div>
<div class=campaign>CAMPAIGN</div>
<div class=editorial>EDITORIAL</div>
<div class=lookbook>LOOKBOOK</div>
<div class=portrait>PORTRAIT</div>
<div class=campaign>CAMPAIGN</div>
<div class=editorial>EDITORIAL</div>
<div class=lookbook>LOOKBOOK</div>
<div class=portrait>PORTRAIT</div>

Answer 1

https://jsfiddle.net/wingsofwind/g579m7ux/

您可以将移除的元素收集到数组中，然后使用 remove()

移除它们

稍后您可以将它们追加到正文中。

/* remove all*/

var allelements = [];  
$("div").each(function(){
  allelements.push($(this));  // we push all divs into an array than remove them
  $(this).remove();
});


/* add back */
setTimeout(function(){ // You can remove This

for(var i = 0 ; i<allelements.length; i++){
    $("body").append(allelements[i]); // we append all elements back into body 
}

},1000) // also remove This

.all,.cam,.edi,.loo,.por {cursor:pointer}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=all>All</div>
<div class=cam>Campaign</div>
<div class=edi>Editorial</div>
<div class=loo>Lookbook</div>
<div class=por>Portrait</div><br>

<div class=campaign>CAMPAIGN</div>
<div class=editorial>EDITORIAL</div>
<div class=lookbook>LOOKBOOK</div>
<div class=portrait>PORTRAIT</div>
<div class=campaign>CAMPAIGN</div>
<div class=editorial>EDITORIAL</div>
<div class=lookbook>LOOKBOOK</div>
<div class=portrait>PORTRAIT</div>
<div class=campaign>CAMPAIGN</div>
<div class=editorial>EDITORIAL</div>
<div class=lookbook>LOOKBOOK</div>
<div class=portrait>PORTRAIT</div>
<div class=campaign>CAMPAIGN</div>
<div class=editorial>EDITORIAL</div>
<div class=lookbook>LOOKBOOK</div>
<div class=portrait>PORTRAIT</div>