How to close a parent p tag after closing the iframe?

Question

I have an iframe, which comes up as a pop up . Just above it is a p tag consisting of close button.

Now, on clicking one of the links on the frame, i am closing it like this :

 window.parent.document.getElementById('myIframeId').
 parentNode.removeChild(window.parent.document.getElementById('myIframeId'));

However, the p tag still exists and does not close up . This is the code :

<p class="close"><a href="#"><img src="buttonClose.jpeg" alt="Close"/></a></p>
<iframe id="myIframeId" style="display:none;" height="430" width="675" src="myjsp.jsp" ></iframe>

When i see in firebug, i can see that the iframe tag is no more, but the p tag still exists and it does not close , if not closed manually by clicking on the close icon.

EDIT : After the suggestion by David, I have wrapped bot tags inside a div :

<div id = "closeModal">
<p class="close"><a href="#"><img src="buttonClose.jpeg" alt="Close"/></a></p>
<iframe id="myIframeId" style="display:none;" height="430" width="675" src="myjsp.jsp" ></iframe>
</div>

However, everytime now i close the iframe using david's suggestion, anither dynamic div gets added like this :

<div id="myContainerModal" class="" style="z-index: 9999; width: 675px; position: absolute; top: 75px; left: 290px; opacity: 0.999999;">
<div id = "closeModal">
<p class="close"><a href="#"><img src="buttonClose.jpeg" alt="Close"/></a></p>
<iframe id="myIframeId" style="display:none;" height="430" width="675" src="myjsp.jsp" ></iframe>
</div>
</div>

Now how can i get rid of the dynamic div : myContainerModal , it is not going out of the screen ?

How can i close this p tag after closing the iframe? Kindly help .

Answer 1

You could access #myIframeId's previousElementSibling, which would be the p.

var iframe = window.parent.document.getElementById('myIframeId');
iframe.parentNode.removeChild(iframe.previousElementSibling);
iframe.parentNode.removeChild(iframe);

But it would've been simlper, and arguably neater, to wrap the two elements in a div and remove that by ID, rather than the iframe.

HTML:

<div id="iframe-container">
   <p class="close">...</p>
   <iframe>...</iframe>
</div>

JS:

var iframe = window.parent.document.getElementById('iframe-container');
iframe.parentNode.removeChild(iframe);

Answer 2

You can use this:

var p = document.getElementsByClassName("close")[0]
p.parentNode.removeChild(p);

It would be better to add a id="someName" to the p, though, like this:

<p class="close" id="close"><a href="#"><img src="buttonClose.jpeg" alt="Close"/></a></p>
<iframe id="myIframeId" style="display:none;" height="430" width="675" src="myjsp.jsp" ></iframe>​

Then you can delete it as follows:

var p = document.getElementById("close")
p.parentNode.removeChild(p);

This will prevent you from having to hardcode the index ([0]) into your js.