title: How do I remove iframe within itself by using javascript
body: <p>I know that there are several similar questions, but I have to ask the question again with attached code because of being unable to work out.
  I have two .xhtml file in JSF project. One is mainPage.xhtml has a button that generates dynamic html code to create an iframe (iFramePage.xhtml) and show it on the browser;</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"&gt;
  
  &lt;h:head&gt;
      &lt;h:outputStylesheet library="css" name="style.css" /&gt;
  
      &lt;script type="text/javascript"&gt;
  
          /** Create dynamic iframe HTML code for iFramePage.xhtml **/
          function createIFrameHTML(){
              document.getElementById("iFrameContainer").innerHTML =  '&lt;div id="iframe0"&gt;&lt;iframe src="iFramePage.xhtml" width="450px" height="300px"&gt;&lt;/iframe&gt;&lt;/div&gt;';
          }
  
          /** Close iFrame **/
          function removeElement() {
  
          /*Both lines work properly when I call inside this page, */
          /*..however it does not work by calling from iFramePage.xhtml */                
  
          //document.getElementById("iFrameContainer").removeChild("iframe0");
          $('iframe0').remove();
          }
      &lt;/script&gt;
  &lt;/h:head&gt;
  &lt;body&gt;
      &lt;f:view&gt;
          &lt;h:form id="mainForm"&gt;
  
              &lt;!-- Control Menu --&gt;
              &lt;div id="cntrMenu"&gt;
                  &lt;h:commandButton id="cntrBtn1" 
                      onclick="createIFrameHTML();return false;"&gt;&lt;/h:commandButton&gt;
                  &lt;h:commandButton id="cntrBtn2" 
                      onclick="removeElement();return false;"&gt;&lt;/h:commandButton&gt;  
              &lt;/div&gt;
  
              &lt;div id="iFrameContainer"&gt;
                  &lt;!-- an iframe will be generated by createIFrameHTML() --&gt;
              &lt;/div&gt;
          &lt;/h:form&gt;
      &lt;/f:view&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The other page is iFramePage.xhtml that has some html and javascript code;</p>
  
  <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"&gt;
  &lt;h:head&gt;
      &lt;h:outputScript name="......js" /&gt;
      &lt;h:outputStylesheet name="....css" /&gt;
      &lt;script&gt;
  
          /** Close iFrame.**/
          function closeSelf() {
              /* Two lines works properly, however third line does not work!*/
              //window.top.location.href = "HIDDEN"; 
              //parent.document.location.href = "HIDDEN";
              parent.removeElement();
  
          }
      &lt;/script&gt;
  &lt;/h:head&gt;
  &lt;body&gt;  
      &lt;input jsfc="h:commandButton" id="exitBtn" value="Kapat" onclick="closeSelf();" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I can generate the iframe by clicking "cntrBtn1" button and removing by clicking "cntrBtn2" inside mainPage.xhtml. However, I need to remove the iframe within itself (iFramePage.xhtml). When I click "exitBtn" in iFramePage.xhtml, the iframe does not disappear. There is nothing about cross-domain, because mainPage.xhtml and iFramePage.xhtml are in the same JSF project, even in the same directory. I can redirect the parent page (looks at two lines in closeSelf() in iFramePage.xhtml), but I cannot remove the iframe by using parent element, why! Please, help me :)</p>