2

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.

SuperBiasedMan
  • 8,997
  • 9
  • 43
  • 66
adrinho
  • 49
  • 1
  • 1
  • 4
  • do you have any code you can share? you need to get the `id` of the `div`, then use `removeChild`... – WhiteHat Aug 04 '15 at 11:36
  • 1
    Have a look here: http://stackoverflow.com/questions/11658011/cannot-modify-content-of-iframe-what-is-wrong. Also remember that you CANNOT modify the content of an iframe which exists on a different host / domain to the parent page - https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy – nealio82 Aug 04 '15 at 11:37
  • Thanks, guys for your answers. I will check that! – adrinho Aug 04 '15 at 11:38

2 Answers2

8

You can use 

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

It is better to use remove()

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

Explaination

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: 1) http://api.jquery.com/remove/ 2) http://api.jquery.com/empty/

sahil gupta
  • 2,141
  • 8
  • 13
  • I understand it as it should be `remove()` not `empty()`, but i'm not sure what is expected behaviour – A. Wolff Aug 04 '15 at 11:39
  • Yes, remove() is a better option than empty() in this case!! Thankzz!! – sahil gupta Aug 04 '15 at 11:45
  • 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: https://developer.spreadshirt.net/display/spreadShop/SpreadShop-Our+new+Partner+Shopsystem 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 Aug 04 '15 at 13:29
  • When i try $("#footer").remove(); online at their site (https://developer.spreadshirt.net/display/spreadShop/SpreadShop-Our+new+Partner+Shopsystem) 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 Aug 04 '15 at 13:38
  • 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? – adrinho Aug 04 '15 at 21:23
  • I think that it doesn't worl because the "Domains, protocols and ports must match.". Please have a look at the [link](https://en.wikipedia.org/wiki/Same-origin_policy) – sahil gupta Aug 05 '15 at 04:57
  • Please also refer to this solution [same origin policy](http://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame) – sahil gupta Aug 05 '15 at 05:12
  • Please also refer to this SO Solution [ways to circumvent same origin policy](http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy) – sahil gupta Aug 05 '15 at 05:40
0

You can try something like:-

frame.removeChild(//pass div id here);
Vineet Tyagi
  • 162
  • 15