How to hide all elements in a HTML page using jQuery?

In this example, I am going to show you how to hide all HTML elements present in a HTML page using jQuery.

As we know jQuery has so many in built functions to easily select or change DOM elements with minimal coding effort.

To hide all DOM elements, I am gonna use one such function out of existing jQuery functions called hide.

To select all DOM elements, we need to use ALL selector usually specified by the symbol “*” (Asterisk).

Enough talking let us dive into coding.

Code

Here is the HTML code (main.html):

<html>
 <head>
  <title>How to hide all HTML elements using jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript">
   function func1(){ 
    $("*").hide(); 
   }
  </script>
 </head>
 <body>
  <p>
   This example illustrates how to hide all HTML (DOM) elements using jquery. Please click the below button to hide entire Page.
  </p>
  <p> 
   Here you go:
  </p>
  <p>
   <button onclick="func1()">Click me to hide all HTML elements</button>
  </p> 
 </body>
</html>

Execute the code


Download

You can download the source code right from below and explore.

Download Source Code

Author: Udhay

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *