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: 1927
Here I am going to show how to hide an HTML control in using jQuery,
DEMO
Hide by control, will hide all h2 controls in form.
$("h2").hide();
Hide by control id, will hide control having "txt1". For hide by control id, we need to use # before control in double quotes.
$("#txt1").hide();
Hide by class name, Will hide all controls having the class name "classname", We need to use . (dot) before class name in double quotes.
$(".classname").hide();
Full Demo code
?<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<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/>
</body>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
function hidebycontrol()
{
$("h2").hide();
}
function hidebyId()
{
$("#txt1").hide();
}
function hidebyclass()
{
$(".classname").hide();
}
</script>
</html>