Last Updated on August 9, 2022 by Roshan Parihar
In this tutorial, learn how to check if element is exists or hidden using jQuery. The short answer is: use jQuery length with the selector of jQuery to find the hidden element on button click.
Find the hidden element’s existence and display the element with a button click. Initially, the element is in the hidden state using the CSS display:none property.
Let’s find out how to check the element if exists or not with the example given below.
How to Check If Element Exists Using
To perform this task, you have to first use the jQuery selector to select the required element. After that, use the length to find the length of the element that indicated the element exists. Now, use the show() function of jQuery to show the element when exist.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $('.showhiddenbtn').click(function(){ if($(".item").length){ alert("The element is already exists."); } }); }); </script> <div class="item" style="display:none;"> <p>This is hidden paragraph content.</p> </div> <button type="button" class="showhiddenbtn">Check If Element Exists</button> |
Output
The above example contains the button that you have to click the find the existence of an element. After you click the button, you will get the hidden element display using show(). The above example contains the <div> element and the paragraph element which is initially in a hidden state.
You May Also Like to Read
- jQuery Show/Hide Function
- jQuery hasClass() Method
- how to redirect to another page using jQuery and Javascript
I hope you like this tutorial on how to check if the element exists or not using jQuery.