How to Hide HTML Element onclick in jQuery Easily

By Saruque Ahamed Mollick

In 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

  1. Using inline. (i,e onclick event directly)
  2. using jQuery click() method

Also read,

Calculate the distance between mouse and element in jQuery



How to set a timer 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

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