使用带有 JavaScript 的按钮隐藏 div 标签

Question

我一直在整个 Stack Overflow 上寻找解决方案，我什至从 W3Schools 复制了一些简单的代码，但两者似乎都不起作用。

这是我当前的代码（简化版）：

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

现在还有：

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

没用...

我也试过先在 CSS 中设置它，然后尝试用 JavaScript 编辑它，例如：

#vraagkader {
  display: block;
}

然后使用相同的 JavaScript 但这也不起作用。

现在，由于某种原因，所有这些似乎都不起作用。谁能告诉我为什么？

Answer 1

你的问题是你的按钮是 "submit"。单击它时，它会重新加载页面。当然，它还会删除 div，您的代码有效。但是页面会立即重新加载，因此它的重新生成速度比您的眼睛看到的要快。将 type="submit" 更改为 type="button"，你应该没问题。

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

Answer 2

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>

使用带有 JavaScript 的按钮隐藏 div 标签

Hide div tag using button with JavaScript

html

javascript

block

display