移除DOM并重新添加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>

- Federico

---

请查看此链接：https://dev59.com/kXI-5IYBdhLWcg3wEEHu - Himanshu Shekhar

为什么你不能只是隐藏它们，这比使用detach()要容易得多。 - adeneo

@HimanshuShekhar 我已经尝试过克隆元素，但是当我“append”它时，实际上什么也没发生。 - Federico

可能是 暂时删除并稍后重新插入DOM元素？ 的重复问题。 - 31piy

@adeneo，只是因为我正在使用一个插件，它不允许隐藏或者即使我隐藏了，它们仍然可见。 - Federico

好的，当您使用detach时，您必须存储一个引用，例如var elem = $('#id').detach()。 - adeneo

Answer 1

你可以将被删除的元素收集到数组中，然后使用 remove() 删除它们。

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

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>

- berkay kılıç

---

@Federico，这将会移除所有的上下文并在一秒后重新添加回来，如果你单独裁剪部分，则可以使用它们。 - berkay kılıç

Answer 2

通过使用临时变量可能是可行的。

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

- Rohit Sharma