remove div or iframe on click

Question

There is a iframe fb group like, and need to hide it on click, but jQuery doesnt work

<script>
    $(".closeFrame").click(function(){
        $("#test").remove();
    });
</script>


<div id = "test" class='like-btn'>
    <iframe = "#"  class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>

Keith, please offer some explanation. The `remove()` method has different behavior and may be more desireable. — isherwood, Sep 23 '16 at 18:22
Possible duplicate of [How to add click event to a iframe with JQuery](http://stackoverflow.com/questions/1609741/how-to-add-click-event-to-a-iframe-with-jquery) — thanksd, Sep 23 '16 at 18:57
Yeah, in a jsfiddle it fails with `` but works fine without the `= "#"` ... `<iframe ...="" class="closeFrame">` — Stephen P, Sep 23 '16 at 19:00

score 1 · Answer 1 · answered Sep 23 '16 at 19:15

First of all, you need to understand the difference between the two elements: the button is the one that has to be clicked and the other element (the div or the iframe) is the one that is going to be hidden. It is important to understand this correctly in order to code the script properly.

Javascript code (using jQuery)

$(".hide").click(function () {
    $(".elementtohide").hide();
});

See it in action: JSFiddle

Explanation

The idea is to attach an event to the button that has to be clicked in order to receive the user's click (this is made with the jQuery method called .click()). Inside that, we must especify what is going to happen when the click is done, so we make a call to the jQuery method called .hide() in order to hide the element (I have used a div but you can use an iframe or whatever you want).

Note: as mentioned in comments, .hide() and .remove() have different behaviours: the first one just adds the style display: none to the element and the second removes the element from the DOM, which means that if you had to show it again, you would have to create it. Use the one that better fits your needs.

score 1 · Answer 2 · answered Sep 23 '16 at 19:28

A code like this can work

<div id = "test" class='like-btn'>
    <iframe = "#" onclick="this.parentNode.style.display = 'none'" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>

but When you click into an iframe you will click on another part of the world so will not work so the code above will work only if the element isn't an iframe(if is a DIV can work)

so the solution should be

<div id = "test" class='like-btn'>
<button onclick="document.getElementById('test').style.display = 'none'" value="Press me" name="closeBtn"/>
    <iframe = "#" onclick="this.parentNode.style.display = 'none'" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>

remove div or iframe on click

2 Answers2

Javascript code (using jQuery)

Explanation