javascript - 如何在关闭 iframe 后关闭父 p 标签？

Question

我有一个 iframe，它以弹出窗口的形式出现。它的正上方是一个由关闭按钮组成的 p 标签。

现在，单击框架上的一个链接，我将像这样关闭它:

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

但是，p标签仍然存在，并没有关闭。这是代码:

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

当我在 firebug 中看到时，我可以看到 iframe 标签不再存在，但是 p 标签仍然存在并且它不会关闭，如果没有通过单击关闭图标手动关闭的话。

编辑:根据 David 的建议，我将机器人标签包装在一个 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>

但是，现在每次我使用 david 的建议关闭 iframe 时，都会像这样添加另一个动态 div:

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

现在我怎样才能摆脱动态 div:myContainerModal，它不会离开屏幕？

如何在关闭 iframe 后关闭此 p 标签？请帮忙。

Answer 1

您可以访问 #myIframeId 的 previousElementSibling，这将是 p。

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

但如果将这两个元素包装在 div 中并通过 ID(而不是 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);