DOM aus- und fügen Sie es wieder

Question

Ich habe eine einfache JS-Funktion, die bestimmten Klassen entfernt, während auf einem „Filtermenü“ klicken. Das Problem ist, dass ich nicht weiß, wie man diese entfernt Klassen zeigen, wenn ich auf „All“ klicken heißt

Ich kann nicht verwenden display:none, opacity:0 oder visibility:hidden, ich brauche das DOM vollständig zu entfernen.

Danke für jede Hilfe.

$(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

Es kann unter Verwendung von temporären Variablen möglich sein.

$(document).ready(function() { 
 
\t var toBeDeleted = $('.p-tag'); 
 
\t $('#buttonRemove').on('click',function(event) { 
 
\t \t event.preventDefault(); 
 
\t \t $(toBeDeleted).remove(); 
 
\t }); 
 
\t $('#buttonAdd').on('click',function(event) { 
 
\t \t event.preventDefault(); 
 
\t \t if ($('body').find('.p-tag').length == 0) { 
 
\t \t \t $('body').append(toBeDeleted); 
 
\t \t } 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="" id="buttonRemove">Remove</button> 
 
<button type="button" class="" id="buttonAdd">Add</button> 
 
<p class="p-tag">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 2

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

können Sie entfernten Elemente in Array sammeln als sie durch Verwendung von Entfernen entfernen()

Sie können append sie in den Körper später wieder auf.

/* 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>