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

javascript, jquery, jsp

Solution

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);

Problem

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 .

Original source