title: Use JavaScript to Edit iFrame Elements (Same Domain)
body: <p><strong>UPDATED</strong> (with Link to example)</p>
  
  <p><strong>Link</strong>: <a href="https://brotherhoodgaming.net/" rel="nofollow noreferrer">https://brotherhoodgaming.net/</a> (click <strong>Nav menu</strong> > <strong>Settings</strong> > <strong>Profile Settings</strong>)</p>
  
  <p>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.</p>
  
  <p>My iFrame is created using a javascript append, when the user clicks a button.</p>
  
  <pre><code>$("#menuOverlay").append("&lt;iframe id='iframeContact'' src='contact.php' width='300' height='100%' frameborder='0'&gt;&lt;/iframe&gt;");
  </code></pre>
  
  <p>After that iframe is created my JS below should remove the nav menu inside the frame, but so far it hasn't worked. (<strong>UPDATED JS</strong>)</p>
  
  <pre><code>$("#iframeContact").contents().find("#nav").remove();
  </code></pre>
  
  <p>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?</p>
  
  <p><a href="https://i.stack.imgur.com/zlG6D.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zlG6D.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/rPMv0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rPMv0.jpg" alt="enter image description here"></a></p>