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';}

更新

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

Answer 1

请参阅此fiddle

按如下方式更改您的javascript

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

应该首先进行的更改是重命名您的函数名称，因为close是Javascript中的关键字。

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

根据docs

Element.getElementsByClassName（）方法返回实时包含所有子元素的HTMLCollection 给出类名。当调用文档对象时，完成搜索文档，包括根节点。

详细了解here

Answer 2

选中此fiddle

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

使用onclick命令隐藏DIV元素

3 个答案:

请参阅此fiddle