How to Remove a iframe by jQuery

Question

I create a iframe in a div by jQuery.Then I load another page(lets say page A.jsp) into that iframe. The page 'A.jsp' has some functionality and end of it, the parent iframe should be removed from the first page when a button in 'A.jsp' is pressed . Loading the page 'A.jsp' into the iframe is OK. but I can't remove the parent iframe. How I tried was, select the parent tag iframe then, remove it. but it didn't work. Here is how I tried.Here $(this) referes to a button in page A.jsp and &('div iframe')referes to the parent iframe

$(this).closest($('div iframe')) .animate({
                                   opacity:0
                               },500,function(){$(this).remove()})

How can I remove the parent iframe ?

Could you not create a function on the main page to do it and then call it from the within the iframe? — Void, Mar 29 '12 at 07:37
Does this answer your question? [Pass jquery variables between iframe and parent](https://stackoverflow.com/questions/4689145/pass-jquery-variables-between-iframe-and-parent) — Ian Kemp, May 05 '21 at 08:47

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

This should give you the info you need.

https://stackoverflow.com/a/4689154/897871

Note: the page that hosts the iframe and the page with the content will have to reside on the same host.

edited May 23 '17 at 12:14

Community

1
1

answered Mar 29 '12 at 07:37

jivetek

256
2
12

Yes, $("#myid", top.document); is the code. my id is something in the parent page and top.document says to select from top document. Here it describes more http://groups.google.com/group/jquery-en/browse_thread/thread/5997ef4a60a123af?pli=1 – Débora Mar 29 '12 at 07:51

score 0 · Answer 2 · answered Oct 08 '15 at 07:59

The iframe can be fully remove from the DOM by the remove method eg

This is my iframe

<div id="videoPlayerOP" > <iframe id="optionsPlayVideo" width="520" height="348" style="margin-left: 80px;margin-top: 7px;" src="about:blank"></iframe></div>

After loading some source in it, It can be remove by

$($("#optionsPlayVideo").parent()).empty();

If you want to reuse them them append another iframe in it

$('#videoPlayerOP').append('<iframe id="optionsPlayVideo" width="520" height="348" style="margin-left: 80px;margin-top: 7px;" src="about:blank"></iframe>');

Thanks

score 0 · Answer 3 · edited May 23 '17 at 12:14

0

To which element does this refer to?

To access the iframe you should point to:

parent.document

or

parent.$("iframe")

if you want to use jQuery. Same Origin Policy is always involved here, so pay attention to what you can actually do.

Another solution is to reload the parent page using a simple link that has target="_parent".

How to Remove a iframe by jQuery

3 Answers3