How to click on an iframe to remove it?

Question

Well I got the most basic question. I want to select the iframe within the div. And when this iframe is clicked no matter where, I want to remove the iframe. How can I do this?

<div id="box">
    Random thoughts
    <iframe src=""></iframe>
</div>

See here: http://jsfiddle.net/nT4uZ/1/

Answer 1

$('#box iframe').click(function(){
    $('#box iframe').remove();
});

Try Online

Try to use that script, hope it can help you :)

Answer 2

You cannot directly handle the click inside of an iframe as correctly @Daedalus commented.

You need top put an extra div inside the #box div which it will cover the iframe and it will handle the click above the iframe.

You need to find the dimensions of the iframe and its offset and apply those in this div.

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">
    </div>
</div>

CSS

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

JavaScript (with some help from the link here)

//Positioning the #inner_box in the same position with the iframe
var destination = jQuery('#box iframe').offset();
jQuery('#inner_box').css({top: destination.top, left: destination.left});

//Giving the #inner_box the same dimensions with the iframe
jQuery('#inner_box').width(jQuery('#box iframe').width());
jQuery('#inner_box').height(jQuery('#box iframe').height());

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

Here is a fiddle with the code.