How to find the parent class name with known class in jQuery ? Last Updated : 11 Jul, 2025 Comments Improve Suggest changes Like Article Like Report Given an HTML document and the task is to get the parent class of an element with the help of given class name. Approach 1: The on() method is used to select the event handler for selected elements. It means when the user clicks the button then the function call. The closest() method is used to return the first ancestor of the selected elements. Check if ancestor (parent) class exist then it returns the class name otherwise returns not exist. Example: This example uses the closest() method to get the first matched ancestor of the element. html <!DOCTYPE html> <html> <head> <title> How to find a parent class name with a known class </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style= "font-size: 17px; font-weight: bold;"> </p> <div class="parent"> <div class="child"></div> </div> <button> click here </button> <p id="GFG_DOWN" style= "color: green; font-size: 24px; font-weight: bold;"> </p> <script> $('#GFG_UP').text('Click on the button to see result'); $('button').on('click', function() { var object = $('.child').closest('.parent'); if (object.length) { $('#GFG_DOWN').text("className = '.child'" + " with parentName = '.parent'" + " Exists"); } else { $('#GFG_DOWN').text("Not Exists"); } }); </script> </body> </html> Output: Before clicking the button: After clicking the button: Approach 2: The on() method is used to select the event handler for selected elements. It means when the user clicks the button then the function call. The parent() method is used to return all ancestor of the selected elements. Check if ancestor (parent) class exist then it returns the class name otherwise returns not exist. Example: This example uses the parents() method to get the all matched ancestors of the element. html <!DOCTYPE html> <html> <head> <title> How to find a parent class name with a known class </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style= "font-size: 17px; font-weight: bold;"> </p> <div class="parent"> <div class="child"></div> </div> <button> click here </button> <p id="GFG_DOWN" style= "color: green; font-size: 24px; font-weight: bold;"> </p> <script> $('#GFG_UP').text('Click on the button to see result'); $('button').on('click', function() { var object = $('.child').parents('.parent'); if (object.length) { $('#GFG_DOWN').text("className = '.child'" + " with parentName = '.parent'" + " Exists"); } else { $('#GFG_DOWN').text("Not Exists"); } }); </script> </body> </html> Output: Before clicking the button: After clicking the button: jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples. Comment More infoAdvertise with us Next Article How to check whether the event namespace is used in jQuery ? P PranchalKatiyar Follow Improve Article Tags : JQuery jQuery-HTML/CSS Similar Reads How to add class to an element without addClass() method in jQuery ? The task is to add a new class to the element without using addClass() method with the help of jQuery. There are two approaches that are discussed below: Approach 1: To perform the operation, we can use toggleClass() method to toggle the class which we want to add to the element. Example: HTML <! 2 min read How to check whether the event namespace is used in jQuery ? The jQuery is lightweight, and it has a lot of features like HTML/DOM manipulation, CSS manipulation, HTML event methods, effects and animations, AJAX, utilities. Many multinational companies like Google, IBM, and Microsoft use the jQuery library in their application. The event.namespace property re 1 min read How to find the class of clicked element using jQuery ? In this article, we will find the class of the clicked element using jQuery. To find the class of clicked element, we use this.className property. The className property is used to set or return the value of an element’s class attribute. Using this property, the user can change the class of an eleme 1 min read How to find all children with a specified class using jQuery ? There are lots of javascript libraries like - anime.js, screenfull.js, moment.js, etc. JQuery is also a part of javascript libraries. It is used to simplify the code. It is a lightweight and feature-rich library. In this article, we will learn how to find all children with a specified class of each 2 min read How to select an element by name with jQuery ? Selecting an element by name with jQuery allows you to target HTML elements using their `name` attribute. This method is commonly used in form handling, where input fields, checkboxes, or radio buttons share the same name, enabling you to easily manipulate or retrieve their values.Table of ContentUs 3 min read How to select a div with a certain class using jQuery ? Given a HTML document containing many div element with classes. Here the task is to select a div with a certain class, that doesn't have another class. There are two approaches to solve this problem. In one of them, we will use a method and in the other one, we will use not selector. Approach 1: Fir 3 min read Like