使用 onclick 命令隐藏 DIV 元素答案

【问题标题】：Hide DIV element with onclick command使用 onclick 命令隐藏 DIV 元素
【发布时间】：2015-09-08 18:37:28
【问题描述】：

感谢任何帮助我解决此问题的人。

所以问题是我正在尝试使用按钮通过 onclick 事件隐藏一个元素（按类）。但我做不到。

这是jsfiddle上的代码http://jsfiddle.net/1tpdgrnj/

这里是那些希望在这里帮助我的人的代码：

HTML：

<div class="box">Hide on button click!!
<button onclick="close();">Close</button>

Javascript：

function close() {
document.getElementsByClassName("box").style.display = 'none';}

更新

请参阅下面的答案和 jsfiddle 以了解它有何不同。

【问题讨论】：

Javascript onclick hide div的可能重复

标签： javascript jquery html css

【解决方案1】：

看到这个fiddle

如下更改你的javascript

function myFunction() {
    document.getElementsByClassName("box")[0].style.display = 'none';
}

应该做的第一个更改是，重命名您的函数名称，因为close 是 Javascript 中的关键字。

第二个是document.getElementsByClassName()返回一个数组，因此要获取第一个元素，您应该使用索引位置0。

根据docs

Element.getElementsByClassName() 方法返回一个 live HTMLCollection 包含所有具有给定的类名。当在文档对象上调用时，完整的搜索文档，包括根节点。

阅读更多信息here

【讨论】：

非常感谢它就像一个魅力。是的，一整天都被搞砸了。无论如何，感谢您的帮助。
太棒了.. :) 很高兴它对你有所帮助.. :)
是的。 :D 编辑：它说我可以在 4 分钟后选择。

【解决方案2】：

你可以使用 Jquery

<div class="box">Hide on button click!!
    <button class="close">Close</button>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){
    $(".close").click(function(){
        $(this).parent().hide(); return false;

    });
    });
    </script>

【讨论】：

【解决方案3】：

查看fiddle

您也可以使用 jQuery 轻松做到这一点。

$("#hide").click(function(){
    $(".box").fadeOut(150);
});

【讨论】：

虽然上述方法对我有用，但感谢您提供替代方案。