Core JavaScript

Hiding or Removing an HTML Element

This JavaScript program shows how to hide or remove an HTML element by using the onclick event and handler function.

VisibilityDisplay.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's Javascript</title>
  <script type="text/javascript">
    function HideMessage() {
      var sVisibility = document.getElementById('idMessage').style.visibility;
      if (sVisibility == "hidden") {
        document.getElementById('idMessage').style.visibility = "visible";
      } else {
        document.getElementById('idMessage').style.visibility = "hidden";
      }
    }
    function RemoveMessage() {
      var sDisplay = document.getElementById('idMessage').style.display;
      if (sDisplay == "none") {
        document.getElementById('idMessage').style.display = "block";
      } else {
        document.getElementById('idMessage').style.display = "none";
      }
    }
  </script>
</head>
<body>
  <button onclick="HideMessage()">Hide</button>
  <button onclick="RemoveMessage()">Remove</button>
  <q style="display:block;margin:10px;" id="idMessage" >Here I am, Lord. Send me.</q>
  <p>--Isaiah 6:8</p>
</body>
</html>
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.