There is HTML:

<div id="block"> <div class="block"> <div class="block_item"></div> <div class="block_item"></div> </div> </div>

If the window size is less than 600px, then the internal blocks are wrapped in a .block_wrapper block.

 <div id="block"> <div class="block"> <div class="block_wrapper"> <div class="block_item"></div> <div class="block_item"></div> </div> </div> </div>

It is necessary when the window size is greater than or equal to 600px to remove the wrapping element. How to do this without using unwrap() , deleting an element by its selector? When using unwrap() , all parent elements are gradually removed as the browser window is gradually increased.

  • For this there is a css. - Qwertiy ♦

2 answers 2

 removewrapper = function(){ var blockwrapper = $('#block .block_wrapper'); if (blockwrapper.length){ var content = $(blockwrapper).html(); var parent = $(blockwrapper).parent(); $(blockwrapper).remove(); $(parent).html(content); } }

And an example of https://jsfiddle.net/qwdasvb/

  • .html() - so why are you all ... the contents are necessary? - Qwertiy ♦

For example with replaceWith :

 var wrap = $('.block_wrapper'); $(window).on('resize', function(){ if($(this).width() >= 600){ wrap.replaceWith(function() { return this.innerHTML; }); } }); 
 .block_wrapper { background: green; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="block"> <div class="block"> <div class="block_wrapper"> <div class="block_item">item</div> <div class="block_item">item</div> </div> </div> </div>

  • It is necessary not to remove the class, but the wrapping element itself. - Frontender
  • Not this.innerHTML , a $(this).contents() , probably. No need to spoil the insides. - Qwertiy ♦
  • @Qwertiy, and how do they spoil? <div class="block_item">item</div> in the form and remain - HamSter
  • one
    @ElenaSemenchenko, at a minimum, all the handlers fly off if they don’t use ascent up to something higher. As a maximum, re-parsing markup is NOT required to give the same structure that was before. - Qwertiy ♦
  • @Qwertiy, thanks, I'll know! - HamSter