CODEWITHSUNDEEP
javascriptjquerycss
Michael
Michael

Reputation: 13616

Element not hidden when button is clicked

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";
});

Upvotes: 0

Views: 127

Answers (5)

Mohammad Usman
Mohammad Usman

Reputation: 39322

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

Upvotes: 5

Albzi
Albzi

Reputation: 15609

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

Upvotes: 1

Syam Pillai
Syam Pillai

Reputation: 5217

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

Upvotes: 1

Ritesh Kashyap
Ritesh Kashyap

Reputation: 394

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

Upvotes: 0

eisbehr
eisbehr

Reputation: 12452

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.

Upvotes: 2

Related Questions