Question

我有元素，我想在响应中删除此元素，但我想在桌面上重新创建

我的意思是我想删除if中的这个元素，我想再次在else中创建

我的项目是那样的

$(window).resize(function(){
   var width = $(window).width();
   if(width <=768){
       $('.element').remove();
   }else{
    //create again 
  }
}).resize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
<p>something here..</p>
</div>

脚注：我请不要隐藏它，因为当我滚动时它会显示div然后如果我在移动设备上滚动后隐藏它，那么它将再次显示..

Answer 1

如果您确实要删除该元素，请在要再次重新插入时实际使用remove()。使用detach()（https://api.jquery.com/detach/）

以下是Re-attaching jQuery detach();

的示例

var el = $('.element');
if(width <=768){
    el.detach();
}else{
    $(body).append(el);
}

分离可确保元素使jQuery数据与保持关联供以后使用。

Answer 2

为什么不尝试隐藏和显示，因为如果你删除它，你将需要一些隐藏的元素来克隆它或添加回来。我建议你使用hide / show

$(window).resize(function(){
   var width = $(window).width();
   if(width <=768){
       $('.element').hide();
   }else{
       $('.element').show();
  }
}).resize();

或使用css media query

@media(screen and max-width: 768px) {
.element {
    display: none;
    }

}

或者如果您想使用删除，请创建一个全局变量并向其.element提供帮助。

var obj = $(".element");
$(window).resize(function(){
   var width = $(window).width();
   if(width <=768){
       $('.element').remove();
   }else{
       $('body').append(obj);
  }
}).resize();

Answer 3

为什么要为类似响应的设计删除和恢复它？您可能正在使用CSS Media-Queries，这对资源更友好，总体而言是更好的方法：

@media(screen and max-width: 768px) {
    .element {
        display: none;
    }
}

如果你必须使用JS，你应该使用.hide()和.show()，除了通过JQuery，它基本上做同样的事情：

$(window).resize(function() {
   var width = $(window).width();

   if(width <= 768) {
       $('.element').hide();
   } 
   else {
       $('.element').show();
  }
}).resize();

如果我没有明白你的意思，你实际上必须通过删除和恢复以JS的方式做到这一点，请在评论中告诉我，我会尽力帮助。< / p>

如何使用jquery删除和重新创建元素？

3 个答案: