How to use hide() method on button click using jQuery ?

Last Updated : 10 Aug, 2021

jQuery has a lot of handy methods to get the work done easily. In this article, we will discuss one of them which is the hide() method. We can use this method for various purposes on our webpage and get an efficient result.

The very first step will be creating an HTML file and link the jQuery library file via CDN.

jQuery CDN Link:

<script src=”https://code.jquery.com/jquery-3.6.0.min.js” integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anonymous”></script>

jQuery hide() method: This method is used for hiding the web elements.

Example 1: Create an HTML file and add the following code to it.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <!-- jQuery CDN link. -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"> 
    </script> 
  </head> 
  
  <body> 
    <button id="btn">Hide</button> 
  
    <p><b>GeeksforGeeks</b></p> 
  
    <!-- Using hide() method to hide <p/> element. -->
    <script> 
      $(document).ready(function () { 
        $("#btn").click(function () { 
          $("p").hide(); 
        }); 
      }); 
    </script> 
  </body> 
</html> 

Output:

Hide p element

Example 2: We can use the hide() method to hide an image.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <!-- jQuery CDN link. -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"> 
    </script> 
  </head> 
  
  <body> 
    <img
      id="image"
      src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210805112556/gfgImage.png"
      alt=""/> 
    <button id="btn" 
            style="padding-left: 10px;  
            margin-left: 30px"> 
       Hide 
    </button> 
    <!-- Using hide() method to hide an image.-->
    <script> 
      $(document).ready(function () { 
        $("#btn").click(function () { 
          $("#image").hide(); 
        }); 
      }); 
    </script> 
  </body> 
</html> 

Output:

Hide Image

Example 3: The hide() method can also be used to hide any geometrical shape.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <!-- jQuery CDN link. -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"> 
    </script> 
  </head> 
      
  <body> 
    <div id="shape" 
         style="height:100px; width:100px;  
                background-color:green;  
                border-radius:00%;margin:10px;"> 
    </div> 
      
    <button id="btn" style="margin:10px;">Hide Shape</button>   
  
    <!-- Using hide() method to hide a shape. -->
    <script> 
      $(document).ready(function () { 
        $("#btn").click(function () { 
          $("#shape").hide(); 
        }); 
      }); 
    </script> 
  </body> 
</html> 