How to Hide HTML Element onclick in jQuery Easily
By Saruque Ahamed MollickIn this tutorial, I am going to show you how to hide HTML element onclick in jQuery with both inline and in the script tag.
you can hide an element in many ways. But here we gonna talk about hiding HTML element when someone will click an element. So how to do this?
We have generally two easy options here
- Using inline. (i,e onclick event directly)
- using jQuery click() method
Also read,
How to show and hide div on mouse click in jQuery
Calculate the distance between mouse and element in jQuery
Hide HTML element in jQuery using onclick
So, let’s create our HTML file first.
<!DOCTYPE html> <html> <body> <p>Hey there I am from CodeSpeedy.com</p> </body> </html>
Now, we gonna hide <p> element when user will click on this element.
Now just add this inline in the <p> tag.
onclick="$(this).hide()"
So the full code will look like this
<!DOCTYPE html> <html> <body> <p onclick="$(this).hide()">Hey there I am from CodeSpeedy.com</p> </body> </html>
This will hide your HTML element when you will click on it.
Also, Read
Upload File With Ajax Using PHP and jQuery
Send HTTP Get Request To A Page And GET The Result Back Using jQuery
Hide HTML element in jQuery using click() method
Here we gonna hide HTML element using click method in jQuery
click method can trigger click event or run a function when it is clicked.
<!DOCTYPE html>
<html>
<body>
<p id="id_here">Hey this is saruque</p>
<p onclick="$(this).hide()">Hey there I am from CodeSpeedy.com</p>
<script>
$("#id_here").click(function(){
$(this).hide();
});
</script>
</body>
</html>
$() is a jQuery function where we gonna pass this as a parameter.
By using this we can hide our HTML element easily.
Leave a Reply