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>

点击后删除div或iframe

2 个答案:

Javascript代码（使用jQuery）

说明