JavaScript Code


jQuery – Hide element(s)



Hide HTML Element(s) using jQuery

Selected some HTML elements in the document, hide them using jQuery.

Solution

To hide selected HTML elements using jQuery, call hide() function on the selected elements.

For example, the syntax to hide all paragraphs in the document is

$("p").hide();

Programs

1. Hide all paragraphs in the document.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
      function myAction() {
        $("p").hide();
      }
    </script>
  </head>
  <body>
    <button onclick="myAction()">Hide all paragraphs</button>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <br>
    <a href="#">A dummy link</a>
  </body>
</html>

2. Hide all link elements in the document.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
      function myAction() {
        $("a").hide();
      }
    </script>
  </head>
  <body>
    <button onclick="myAction()">Hide all links</button>
    <p>Welcome to <a href="#jquery">jQuery</a></p>
    <p>Welcome to <a href="#jquery">jQuery 3</a></p>
  </body>
</html>


copyright @2023