Hide div tag using button with JavaScript

Question

I've been searching for solutions all over Stack Overflow and I've even copied some simple code from W3Schools but both just don't seem to work.

This is my current code (simplified):

<script language="javascript">
  function remove() {
    document.getElementById('vraagkader').style.display = "none";
  }
</script>

<head>
</head>
<body>
  <div id="vraagkader" style="display: block">
    <?php
      echo "<form name='test'><input type='submit' name='5050' value='5050' onClick='remove()'></form>";
    ?>
  </div>
</body>

Now also:

<script language="javascript">
  function remove() {
    if (document.getElementById('vraagkader').style.display !== "none";) {
      document.getElementById('vraagkader').style.display = "none";
    }
  }
</script>

Doesn't work...

I've also tried setting it up in CSS first and then tried editing it with JavaScript like:

#vraagkader {
  display: block;
}

And then with the same JavaScript but that also doesn't work.

Now all of it just doesn't seem to work for some reason. Can anyone tell me why?

Any errors in the console? At least the second version should give you a parse error... — Thomas, Mar 14 '17 at 16:21
Youre not doing anything to prevent the form from being submitted. You also have a typo (extra `;`) in `document.getElementById('vraagkader').style.display !== "none";`. And we don't need to see the PHP, just the rendered HTML. — j08691, Mar 14 '17 at 16:22
Sorry but you code is working.Tested here:http://phpfiddle.org/main/code/zvi3-85x6 (press F9) — Nelson Teixeira, Mar 14 '17 at 16:26
@NelsonTeixeira no, it doesn't. it reloads, thus re-showing the div. — Kevin B, Mar 14 '17 at 16:36
Editing your question to a new question after it has been answered isn't allowed, Please ask a new question. Note however that the question you were trying to ask with your edit is a duplicate. Please try searching first. (you can't have duplicate ID's on a web page) — Kevin B, Mar 14 '17 at 17:57
http://stackoverflow.com/questions/3093121/is-it-normal-to-have-two-elements-with-same-id-in-two-div-elements-with-other-id/3093136#3093136 — Kevin B, Mar 14 '17 at 18:19
Here's more: http://stackoverflow.com/search?q=%5Bjavascript%5D+%22duplicate+id%22+is%3Aanswer — Kevin B, Mar 14 '17 at 18:19

score 0 · Accepted Answer · answered Mar 14 '17 at 16:23

0

Your problem is that your button is a "submit". When you click it, it reloads the page. Granted, it also deletes the div, your code works. But the page reloads immediately, so it's regenerated faster than your eye can see. Change type="submit" to type="button" and you should be fine.

http://codepen.io/jeremythille/pen/VpzWMW

answered Mar 14 '17 at 16:23

Jeremy Thille

26,047
12
43
63

Why the silent downvote? – Jeremy Thille Mar 14 '17 at 16:25
Works for me +1 – mferly Mar 14 '17 at 16:27
The code posted by the OP is working. – Nelson Teixeira Mar 14 '17 at 16:33
No it's not, check out my codepen link. When you click the submit button, it reloads it all. – Jeremy Thille Mar 14 '17 at 16:34
Oh.. That actually did the trick, never knew there was a difference between the two, thank you! :) – G Buis Mar 14 '17 at 17:19

Sarath E · Answer 2 · 2017-03-14T16:39:25.727

-1

function remove() {
    document.getElementById('vraagkader').style.display = "none";
 return false;
  }

 <head>
  </head>
  <body>
    <div id="vraagkader" style="display: block">
      <form name='test'><input type='submit' name='5050' value='5050' onClick='return remove()'></form>
    </div>
  </body>

edited Mar 14 '17 at 16:39

answered Mar 14 '17 at 16:23

Sarath E

396
3
13

Hide div tag using button with JavaScript

2 Answers2