I have elements and I want to remove this element on responsive but I want to recreate again on desktop

I mean I want to remove this element in if and I want to create again in else

my project is something like that

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

<script src=".1.1/jquery.min.js"></script>
<div class="element">
<p>something here..</p>
</div>

I have elements and I want to remove this element on responsive but I want to recreate again on desktop

I mean I want to remove this element in if and I want to create again in else

my project is something like that

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

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

footnote: please I don't want to hide it because it div is showing when I scroll then if I hide it after scroll on mobile then it will be shown again..

• javascript
• jquery

• 2 why not using css media queries – Frank Wisniewski Commented Jun 1, 2017 at 7:05
• footnote: please I don't want to hide it because it div is showing when I scroll then if I hide it after scroll on mobile then it will be shown again.. – ani_css Commented Jun 1, 2017 at 7:07
• 1 what you exactly mean by this div is showing when I scroll? – vijayP Commented Jun 1, 2017 at 7:09

3 Answers 3

If you really want to remove the element, don't actually use remove() when you want to reinsert it again. Use detach() (https://api.jquery./detach/)

The following is an example from Re-attaching jQuery detach();

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

Detaching ensures that the element keeps jQuery data associated with it for later use.

Why dont you try hide and show, because if you remove it you will need some hidden element to clone it or add it back. I would suggest you using hide/show

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

or using css media query

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

}

or if you want to use remove then make a global variable and assing .element to it.

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

Why would you want to delete and restore it for a responsive-like design? You could be using CSS Media-Queries instead, which is much more resource-friendly and overall the better approach:

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

If you would have to use JS, you should use .hide() and .show(), which essentially does the same thing except via JQuery:

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

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

If I'm not getting your point and you actually have to do it the JS way via deleting and restoring, please let me know in a ment and I will try to help.