How to remove divs from a list of images with jQuery?

0

I created divs using:

 $('.images').find('img').replaceWith(function () {
     return '<div class="resize">' + this.outerHTML + '</div>'
 }); 

Output HTML:

<div class="images">

 <div class="resize"><img src="img1.jpg"></div>
 <div class="resize"><img src="img2.jpg"></div>
 <div class="resize"><img src="img3.jpg"></div>

</div>

Now I would like to revert to this, is it possible?

<div class="images">
   <img src="img1.jpg">
   <img src="img2.jpg">
   <img src="img3.jpg">
</div>
    
asked by anonymous 17.04.2018 / 16:46

2 answers

1
$('img').unwrap();

This should work.

    
17.04.2018 / 16:50
0

I believe the script below does what you want:

 $("#reverter").click(function() {
    $(".resize").each(function(){
        var content = $(this).html();
        $(".images").append(content);
        $(this).remove();
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="images">

 <div class="resize"><img src="img1.jpg"></div>
 <div class="resize"><img src="img2.jpg"></div>
 <div class="resize"><img src="img3.jpg"></div>

</div>

<input type="button" name="botao" id="reverter" value="reverter"> 

Note that when you click the button, the divs of the images will be removed and the code will look like this:

<div class="images">
   <img src="img1.jpg">
   <img src="img2.jpg">
   <img src="img3.jpg">
</div>
    
17.04.2018 / 16:59