Hide DIV element with onclick command

Question

Thanks to anyone who helps me solve this issue.

So the issue is I'm trying to hide an element (by class) with an onclick event using a button. But I am unable to do so.

Here's the code on jsfiddle http://jsfiddle.net/1tpdgrnj/

Here's the code for those who wish to help me here:

HTML:

<div class="box">Hide on button click!!
<button onclick="close();">Close</button>

Javascript:

function close() {
document.getElementsByClassName("box").style.display = 'none';}

UPDATE

Refer to the answer below and to the jsfiddle to see how it's different.

possible duplicate of [Javascript onclick hide div](http://stackoverflow.com/questions/5515527/javascript-onclick-hide-div) — Adam Buchanan Smith, Sep 08 '15 at 18:41

score 4 · Accepted Answer · answered Sep 08 '15 at 18:41

4

See this fiddle

Change your javascript as follows

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

First change that should be done is, rename your function name, as close is a keyword in Javascript.

Second one is that, document.getElementsByClassName() returns an array and thus to get the first element you should use the index position 0.

According to the docs

The Element.getElementsByClassName() method returns a live HTMLCollection containing all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node.

Read more about it here

answered Sep 08 '15 at 18:41

Lal

14,726
4
45
70

1

Thanks so much it worked like a charm. Yup was messed up the whole day. Thanks for the help anyways man. – Saumya Banthia Sep 08 '15 at 18:46
Great.. :) Glad that it helped you.. :) – Lal Sep 08 '15 at 18:46
Yup will do. :D Edit: it says I can select after 4 mins. – Saumya Banthia Sep 08 '15 at 18:47

score 0 · Answer 2 · answered Sep 08 '15 at 18:50

You can use 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>

score -1 · Answer 3 · answered Sep 08 '15 at 18:44

-1

Check this fiddle

You can also do this easily with jQuery.

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

answered Sep 08 '15 at 18:44

kwh71787

576
1
4
14

Although the above worked out for me, but thanks for providing an alternative. – Saumya Banthia Sep 08 '15 at 18:47

Hide DIV element with onclick command

3 Answers3

See this fiddle