Удаление DOM и добавление его снова

У меня есть простая функция 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>


javascript jquery detach
person Federico    schedule 04.08.2017    source источник
comment
Проверьте это: stackoverflow .com/questions/2026386/   -  person Himanshu Shekhar    schedule 04.08.2017
comment
И почему бы вам просто не скрыть их, это было бы намного проще, чем использовать detach()   -  person adeneo    schedule 04.08.2017
comment
@HimanshuShekhar Я уже пытался клонировать элемент, но когда я «добавляю», на самом деле ничего не происходит.   -  person Federico    schedule 04.08.2017
comment
Возможный дубликат временного удаления и последующей повторной вставки элемента DOM?   -  person 31piy    schedule 04.08.2017
comment
@adeneo просто потому, что я использую плагин, который не позволяет скрывать, или лучше я могу скрыть, но они все еще видны.   -  person Federico    schedule 04.08.2017
comment
Ну, когда вы используете detach, вам нужно сохранить ссылку, как в var elem = $('#id').detach()   -  person adeneo    schedule 04.08.2017

Ответы (2)


arrow_upward
1
arrow_downward

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

Вы можете собрать удаленные элементы в массив, а затем удалить их с помощью remove()

You can append them back into the body later on. 

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

person berkay kılıç    schedule 04.08.2017
comment
@Federico, это удаляет весь контекст, чем добавляет его обратно через 1 секунду, если вы обрезаете части по отдельности, вы можете их использовать - person berkay kılıç; 04.08.2017

arrow_upward
0
arrow_downward

Это может быть возможно с использованием временной переменной.

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

person Rohit Sharma    schedule 04.08.2017