JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">Random thoughts
    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&amp;width&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;header=false&amp;stream=false&amp;show_border=true&amp;appId=163663917164005" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:62px;" allowTransparency="true"></iframe>
    <div id="inner_box">&nbsp;
    </div>
</div>

CSS

#box {
    width:350px;
    height:200px;
    background:pink;
}

#inner_box {
    position:absolute;
    z-index:2; 
}

iframe {
    z-index:1; 
    position:relative;
    background:orange;
}

JavaScript

// how to select the iframe with jquery to remove it when it is clicked in the orange area?

var destination = jQuery('#box iframe').offset();
jQuery('#inner_box').css({top: destination.top, left: destination.left});

jQuery('#inner_box').width(jQuery('#box iframe').width());
jQuery('#inner_box').height(jQuery('#box iframe').height());

jQuery('#inner_box').click(function() {
    jQuery(this).closest('#box').find('iframe').remove();
});