使用onclick命令隐藏DIV元素

Question

感谢所有帮助我解决此问题的人。

所以问题是我试图通过按钮使用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';}

UPDATE

请参阅下面的答案和jsfiddle，以了解它的不同之处。

Answer 1

看到这个小提琴

如下更改您的JavaScript

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

首先要做的更改是， 重命名函数名称 ，因为close是Javascript中的关键字。

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

根据文档

Element.getElementsByClassName（）方法返回一个实时HTMLCollection，其中包含具有所有给定类名称的所有子元素。 在文档对象上调用时，将搜索完整的文档，包括根节点。

在这里了解更多

Answer 2

检查这个小提琴

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

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

Answer 3

您可以使用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>