JavaScript: onclick remove div with iframe

Question

Hi I tried to make a div remove after clicking the facebook like button in it but Cant do it here is my code

<div onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
<iframe id='theiframe' scrolling='no' frameBorder='0' allowTransparency='true'            src='http://www.facebook.com/widgets/like.php?href="www.facebook.com/makestream"&amp;layout=standard&amp;show_faces=true&amp;width=53&amp;action=like&amp;colorscheme=light&amp;height=80' style='width:53px;height:23px;overflow:hidden;border:0;opacity:"0.8";filter:alpha(opacity="0.8");'></iframe>
</div>

is there a way to remove the div or the ifreme after clicking the facebook like button ?

Answer 1

You cannot capture the click event in the iframe area, since it's handled by iframe itself and won't bubble up to the DIV parent. This question on SO may be helpful to you: capture click on div surrounding an iframe

I can imagine one workaround though: take use of Facebook's SDK and register a listener on the action on like button(see this facebook doc ). This article "How to execute JavaScript when the Facebook Like button is clicked" gives some examples.

Answer 2

I'm not sure about your JavaScript.

Try this:

<div onclick="this.parentNode.removeChild(this);">
<!-- iframe -->
</div>

UPDATE:

I don't think this is possible.

The click event on the FB Like button will not propagate out of the iframe.

Here's an example: http://jsfiddle.net/kboucher/pdvdH/

Answer 3

Facebook provides a callback function when someone clicks on the like button : https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

FB.Event.subscribe('edge.create',
    function(response) {
        alert('You liked the URL: ' + response);
    }
);