javascript - iframeを閉じた後に親pタグを閉じる方法は?

Question

pop up として表示される iframe があります。そのすぐ上に、閉じるボタンで構成される ap タグがあります。

フレーム上のリンクの 1 つをクリックすると、次のように閉じます。

 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しかし、2 つの要素を でラップし、iframe ではなく ID でそれを削除する方が、より簡単で、間違いなくきれいだったでしょう。

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

これを使用できます：

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

id="someName"ただし、次のように p にa を追加することをお勧めします。

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

その後、次のように削除できます。

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

これにより、インデックス ( [0]) を js にハードコードする必要がなくなります。

Answer 3

クラス名で P タグを見つけることができ、それを削除することもできます。