为什么display = "none"在jsFiddle中单击按钮时不起作用？单击按钮时未隐藏的元素
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/>
的JavaScript：
$('input[type=button]').click(function() {
document.getElementsByClassName("hidden").style.display = "none";
});
document.getElementsByClassName()返回HTMLCollection这就像对象数组。您正试图在此阵列上应用HTML节点属性。
首先从该数组中选择DOM节点，然后应用样式属性，如下所示。
document.getElementsByClassName("hidden")[0].style.display = "none";
$('input[type=button]').click(function() {
document.getElementsByClassName("hidden")[0].style.display = "none";
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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" value="test" />或者您可以使用jQuery隐藏元素。
$('input[type=button]').click(function() {
$(".hidden").first().hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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" value="test" />在纯JavaScript，你可以如下做到这一点：
var button = document.getElementsByClassName('button')[0];
button.addEventListener('click', function() {
document.getElementsByClassName("hidden")[0].style.display = "none";
}, false);<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 class="button" type="button" value="test" />好的答案，你可以包括一个纯粹的JS方法吗？然后我可以删除我的答案，因为这在纯JS中很简单。 – Albzi
为什么不使用'first（）'？ – madalinivascu
@madalinivascu非常感谢，我已经更新了我的答案） –
你可以使用jQuery来轻松地做到这一点，你已经有了它列入到您的项目，所以它没有开销。简单地使用hide()来从视图中删除元件：
$('input[type=button]').click(function() {
$(".hidden").hide();
});
为什么使用原生JS当你拥有jQuery的页面上使用。
http://jsfiddle.net/ritesh14887/pUeue/3442/
$('input[type=button]').click(function() {
$(".hidden").css('display','none');
});
为什么这是投票?? –
的document.getElementsByClassName返回类的阵列。
选择了数组的第一个元素。
$('input[type=button]').click(function() {
document.getElementsByClassName("hidden")[0].style.display = "none";
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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" id="test" value="test" />这里是更新jsFiddle
无需混合jQuery和JavaScript的，这里是一个JS方法：
document.querySelector('input').onclick = function() {
document.querySelector('.hidden').style.display = "none";
}
的原因，你的getElementsByClassName惯于工作因为它是一个数组。您需要遍历它并将它们全部循环，或者在它后面追加[n]（n是您想要的数组中的元素的编号，从0开始）以获得特定的一个。
document.querySelector('input').onclick = function() {
document.querySelector('.hidden').style.display = "none";
}<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" value="test" />
大声笑，为什么混合jQuery的一个香草JS？ – nicael
http://jsfiddle.net/pUeue/3446/ –
@nicael，因为它们都是库:)）） – madalinivascu