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>
$('img').unwrap();
This should work.
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>