Javascript 单击按钮时未隐藏元素

为什么在中单击按钮时，

display=“none”

不起作用

HTML:

<div>This is a visible heading<div>
<div class="hidden">This is a hidden heading</div>
<div>Notice that the hidden heading still takes up space.</div>

<hr/>

$('input[type=button]').click( function() {
 document.getElementsByClassName("hidden").style.display = "none";
});

---

您可以使用jQuery轻松地完成这项工作，因为您已经将它包含到了项目中，所以它没有开销。只需使用

hide（）

即可从视图中删除元素：

$('input[type=button]').click(function() {
    $(".hidden").hide();
});

---

document.getElementsByCassName（）

返回类似数组的对象。您正试图在此数组上应用HTML节点属性

首先从该数组中选择DOM节点，然后应用样式属性，如下所示

document.getElementsByClassName("hidden")[0].style.display = "none";

$（'input[type=button]'）。单击（function（）{
document.getElementsByClassName（“隐藏”）[0].style.display=“无”；
});

这是一个可见的标题
这是一个隐藏的标题
请注意，隐藏的标题仍然会占用空间。

当您在页面上使用jQuery时，为什么要使用本机JS


document.getElementsByClassName
返回一个类数组

选择数组的第一个元素


$（'input[type=button]'）。单击（function（）{
document.getElementsByClassName（“隐藏”）[0].style.display=“无”；
});

这是一个可见的标题
这是一个隐藏的标题
请注意，隐藏的标题仍然会占用空间。

无需混合使用jQuery和JavaScript，这里有一个JS方法：

document.querySelector('input').onclick = function() {
  document.querySelector('.hidden').style.display = "none";
}

GetElementsByCassName
无法工作的原因是它是一个数组。您需要循环浏览它并
display:hide所有元素，或者通过在其后面附加
[n]
来获取特定的元素（
n
是您想要在数组中的元素的编号，从
0
开始）


document.querySelector（'input'）。onclick=function（）{
document.querySelector（'.hidden'）.style.display=“无”；
}
这是一个可见的标题
这是一个隐藏的标题
请注意，隐藏的标题仍然会占用空间。

Lol，为什么要把jQuery和vanilla JS混在一起？@nicael因为它们都是库：）@madalin“两者”是什么意思？。。JS不是一个JS库。@madalinivascu
javascript
不是一个
library
…回答得好，你也能包含一个纯JS方法吗？然后我可以删除我的答案，因为这在纯JS中非常简单。为什么不使用
first（）
？@madalinivascu非常感谢，我更新了我的答案）@Albzi我添加了一个纯JavaScript解决方案。
document.querySelector('input').onclick = function() {
  document.querySelector('.hidden').style.display = "none";
}