删除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

可以使用临时变量。

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

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

您可以将删除的元素收集到数组中，而不是使用 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>