Use JavaScript to Edit iFrame Elements (Same Domain)

Question

UPDATED (with Link to example)

Link : https://brotherhoodgaming.net/ (click Nav menu > Settings > Profile Settings )

I am using an iFrame to load another page of my website onto my index page. It should all be from the same domain. When my iFrame page loads, it also loads a duplicate copy of the main Nav Menu. I would like to remove this iFrame nav menu and just have a pure frame filled with content.

My iFrame is created using a javascript append, when the user clicks a button.

$("#menuOverlay").append("<iframe id='iframeContact'' src='contact.php' width='300' height='100%' frameborder='0'></iframe>");

After that iframe is created my JS below should remove the nav menu inside the frame, but so far it hasn't worked. ( UPDATED JS )

$("#iframeContact").contents().find("#nav").remove();

Any suggestions? I've been searching for this and the above JS was recommended, but I cannot get it to locate the elements inside the frame. Is this because my frame is created through JS append and the other functions don't have time to run?

Answer 1

Try this instead. Removing a class does not remove the element itself. Just the class on the element. Assuming all your selectors are correct this should work.

It's working on the link but you need to make sure your iframe is fully loaded before executing the code.

var iframe = $("#iframeContact");
iframe.on("load",function ()
  {
    iframe.contents().find("#nav").remove();
  });