点击按钮隐藏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';}

更新

请参考下面的回答和 jsfiddle，了解它们之间的区别。

- Saumya Banthia

---

可能是重复的问题：Javascript onclick 隐藏 div - Adam Buchanan Smith

Answer 1

请查看此fiddle

将您的JavaScript更改如下

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

首先需要做的更改是，将您的函数名重命名，因为“close”是Javascript中的关键字。

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

根据文档：

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

在这里了解更多信息。

- Lal

---

非常感谢，它像魔法一样奏效了。是的，整天都很糟糕。无论如何，感谢你的帮助，伙计。 - Saumya Banthia

太好了.. :) 很高兴能帮助到你.. :) - Lal

好的，我会做的。:D 编辑：它说我可以在4分钟后选择。 - Saumya Banthia

Answer 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>

- frank_ivan

Answer 3

检查这个fiddle

你也可以轻松地使用jQuery完成这个任务。

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

- kwh71787

---

虽然上述方法对我有效，但感谢您提供了另一种选择。 - Saumya Banthia