點擊刪除div或iframe

Question

有一個iframe fb組，需要在單擊時將其隱藏，但jQuery無法正常工作

<script>
    $(".closeFrame").click(function(){
        $("#test").remove();
    });
</script>


<div id = "test" class='like-btn'>
    <iframe = "#"  class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>

Answer 1

首先，您需要了解兩個元素之間的區別：按鈕是必須單擊的按鈕，另一個元素（div或iframe）是將要隱藏的按鈕。 為了正確地編寫腳本，正確理解這一點很重要。

Javascript代碼（使用jQuery）

$(".hide").click(function () {
    $(".elementtohide").hide();
});

實際操作中看到它： JSFiddle

說明

這個想法是將一個事件附加到必須單擊的按鈕上，以便接收用戶的點擊（這是通過名為.click()的jQuery方法完成的）。 在其中，我們必須指定點擊完成后會發生的情況，因此我們調用了名為.hide()的jQuery方法以隱藏元素（我使用了div，但可以使用iframe或無論你想要什么）。

注意 ：如注釋中所述， .hide()和.remove()具有不同的行為：第一個只是添加樣式display: none到元素，第二個從DOM中刪除了元素，這意味着如果必須再次顯示，則必須創建它。 使用更適合您需求的那一種。

Answer 2

這樣的代碼可以工作

<div id = "test" class='like-btn'>
    <iframe = "#" onclick="this.parentNode.style.display = 'none'" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>

但是當您點擊iframe時，您將點擊世界的另一部分，因此將無法正常工作，因此上述代碼僅在元素不是iframe的情況下才有效（如果DIV可以工作）

所以解決方案應該是

<div id = "test" class='like-btn'>
<button onclick="document.getElementById('test').style.display = 'none'" value="Press me" name="closeBtn"/>
    <iframe = "#" onclick="this.parentNode.style.display = 'none'" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>