单击按钮时元素未隐藏

Question

Why display = "none" not works when button is clicked in 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";
});

Answer 1

document.getElementsByClassName() returns HTMLCollection which is an Array like object. You are trying to apply HTML Node properties on this array.

First select DOM Node from this array then apply style properties as shown below.

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" /> 

Alternatively you can use jQuery to hide element.

 $('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" /> 

In Pure JavaScript you can do it as follows:

 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" /> 

Answer 2

You could use jQuery to do it easily, you already had included it to your project, so it is no overhead. Simply use hide() to remove the element from view:

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

Working example.

Answer 3

The document.getElementsByClassName returns an array of classes.

chose the first element of the array.

 $('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" /> 

Here is the updated jsFiddle

Answer 4

No need to mix jQuery and JavaScript, here is a JS method:

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

The reason your getElementsByClassName wont work is because it's an array. You either need to loop through it and display:hide; all of them, or get a specific one by appending [n] after it ( n being the number of the element you want in the array, starting at 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" /> 

Answer 5

Why using Native JS when you have jQuery used on page.

http://jsfiddle.net/ritesh14887/pUeue/3442/

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