Free programming examples and instructions

Hide control - jQuery

Demo and code for how to hide an HTML control in jQuery

by Athil

Posted on 22 Jun 2019 Category: jQuery Views: 1454

Here I am going to show how to hide an HTML control in using jQuery,


Hide by control, will hide all h2 controls in form.


Hide by control id, will hide control having "txt1". For hide by control id, we need to use # before control in  double quotes.


Hide by class name, Will hide all controls having the class name "classname", We need to use . (dot) before class name in double quotes.



Full Demo code

?<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <h1> Demo For hiding control jQuery </h1>

    <h2> Heading1 </h2>
    <h2>Heading 2</h2>

    <button onclick="hidebycontrol();">Hide headings </button> <br/> <br/>
      <input type="text" id="txt1"/>
    <button onclick="hidebyId();">Hide by Id </button> <br/><br/>

    <input type="text" class="classname" /> 
    <button onclick="hidebyclass();">Hide by Class </button><br/><br/>

       <script type="text/javascript" src="js/jquery.min.js" ></script>
      function  hidebycontrol()
      function hidebyId()
      function hidebyclass()




Leave a Comment:

Click here to register

Popular articles