Find and replace all elements inside div

Question

I have an element with weird tags figure.

<div id="text"><div class="medium-insert-embeds" contenteditable="false">
    <figure>
        <div class="medium-insert-embed">
            <div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 75.0019%;"><iframe src="https://www.youtube.com/embed/MYxsDlpMN10?wmode=transparent&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div>
        </div>
    </figure>
    <div class="medium-insert-embeds-overlay"></div>
</div><p class=""><br></p><p class=""><br></p><div class="medium-insert-embeds" contenteditable="false">
    <figure>
        <div class="medium-insert-embed">
            <div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 75.0019%;"><iframe src="https://www.youtube.com/embed/MYxsDlpMN10?wmode=transparent&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;"></iframe></div>
        </div>
    </figure>
    <div class="medium-insert-embeds-overlay"></div>
</div><p><br></p></div>

I want to find all such elements and replace them with their contents using jquery.

var container = $('#text');
var htmlOfFirstFigure = container.find('figure').html(); //get html
container.find('figure').replaceWith(htmlOfFirstFigure); //replacing element

It works fine if only one figure element is in html. But how to replace noumerous elements?

Answer 1

replaceWith can be given a function argument, it will call that function on each element in the collection and replace it with the result:

container.find('figure').replaceWith(function() {
    return $(this).html();
});