How to delete HTML Elements in an iFrame using JavaScript

Question

I have an iFrame and a div with content in it. I want to delete the div via JavaScript, is that possible and how could I do that?

I don't want to just not display it (eg. display: none via CSS) but remove it from the HTML of the site. I have basic knowledge of JavaScript but don't have any experience working with an iFrame.

Have a look here: stackoverflow.com/questions/11658011/…. Also remember that you CANNOT modify the content of an iframe which exists on a different host / domain to the parent page - developer.mozilla.org/en-US/docs/Web/Security/… — nealio82
– nealio82, Commented Aug 4, 2015 at 11:37

Kostas Minaidis · Accepted Answer · 2022-06-29 11:15:10Z

13

You can use

$("#iFrameId").contents().find("#yourDiv").empty();

It is better to use remove()

example: $("#iFrameId").contents().find("#yourDiv").remove();

Explanation

empty() will remove all the contents of the selection.

remove() will remove the selection and its contents and all the event handlers associated with it.

For reference:

edited Jun 29, 2022 at 11:15

Kostas Minaidis

5,6814 gold badges21 silver badges31 bronze badges

answered Aug 4, 2015 at 11:36

sahil gupta

2,34914 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

A. Wolff Over a year ago

I understand it as it should be remove() not empty(), but i'm not sure what is expected behaviour

sahil gupta Over a year ago

Yes, remove() is a better option than empty() in this case!! Thankzz!!

adrinho Over a year ago

I have tried this and it worked for a normal "iframe" but not with a spreadshirt shop integration. You can view an example shop at: developer.spreadshirt.net/display/spreadShop/… scroll down at Out of the Box Shop Example. I just want to remove the footer, but when i use $("#footer").remove(); nothing happens.

adrinho Over a year ago

When i try $("#footer").remove(); online at their site (developer.spreadshirt.net/display/spreadShop/…) it removes the footer. But not when i try it locally. I'm testing it locally but i'm online and i can't remove the footer. Is it because i test it "locally" or it's because of their script which is loading and maybe i have to execute the remove script after their script?

adrinho Over a year ago

When i test the site local and than add the code in the firebug console i can remove the footer but when i try it in the HTML document i can't remove the footer. I've tested it live on my server and there's the same problem code written in the console no problem, code in html executed no chance to remove the footer. So what now? I've tried to combine the jquery .ready function but nothing. Why is the console approach working and not the code in the html?

|

Vineet Tyagi · Accepted Answer · 2015-08-04 11:38:20Z

0

You can try something like:-

frame.removeChild(//pass div id here);

answered Aug 4, 2015 at 11:38

Vineet Tyagi

3001 silver badge15 bronze badges

Collectives™ on Stack Overflow

How to delete HTML Elements in an iFrame using JavaScript

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related