All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

How To Get Parent Element In jQuery

Last Updated : Mar 11, 2024

How To Get Parent Element In jQuery

In this we will show you the solution of how to get parent element in jQuery, to retrieve the parental elements of the an HTML element, one can use specific methods provided by the JavaScript library jQuery.

These methods make it very simple to retrieve an element's direct parent or all parents.

Using jQuery techniques, it is also possible to fetch elements that are between two given elements or that are closest in parentage to the element being picked.

Step By Step Guide On How To Get Parent Element In jQuery :-

In jQuery, how to obtain the parent element

The following list of four techniques is provided for retrieving the parent element.

  • parent() method
  • parents() method
  • parentUntil() method
  • closest() method

Let's examine each of the aforementioned techniques in greater detail.

parent() Method

Using the parent() method, one can determine an element's direct parent.

It is a native jQuery function that retrieves the element's immediate parent only one level above the supplied element.

Syntax :-


It is optional to utilise the filter argument, which is used to condense the search for the parent element by giving a selector expression.

The selected elements that need to find their parent are the selector in this case.

Parameter: There is no accepted parameter for it.

Return value: It provides the parent of a chosen items as the return value.

parents() Method

The sole difference between the parents() method and the parent() method is that instead of retrieving the direct parent, the parents() function retrieves all of the parents of the provided element.

Syntax :-


It is optional to utilise the filter argument, which is used to condense the search for the parent element by giving a selector expression.

parentsUntil() Method

The parentUntil() technique is applied to retrieve the parents of the provided elements between two other elements.

Syntax :-


The filter parameter has the same function as that of parent() and parents() method, however, the stop parameter is used to denote the element at which the search for parent elements should stop.

Both the parameters are optional.

closest() Technique

When using the closest() method, the very first element that satisfies the supplied element is fetched.

Syntax :-

  .main_div * {
   display: block;
   border: 1px solid green;
   color: green;
   padding: 5px;
   margin: 15px;
  $(document).ready(function() {
    "color": "green",
    "border": "2px solid green"
<div class="main_div">
 <div style="width:500px;">Family (Relation)
 <ul>Hii i'm grandparent..
 <li>Hii i'm parent...
 <span>Hii i'm child...</span>
  1. HTML & HEAD tags are used to begin the code.
  2. Next, we use style to generate the margin blocks.
  3. Next, we use script to import the Jquery library.
  4. Following that, we begin our script.
  5. After that, we run the jQuery code using the ready() method.
  6. After that, we add border by using the parent technique with span in step 6.
  7. Finally, we tuck our writing and stars body away.
  8. Next, we display the parent element using the div class.
  9. BODY & HTML tags are used to finish our code.

Conclusion :-

Consequently, we were able to understand how to access the parent element with jQuery.

Additionally, we discovered that using jQuery's parent(), parents(), parentUntil(), and closest functions, we could retrieve the parent element ().

The nearest() function retrieves the first element that meets the supplied element, whereas the parent() and parents() methods retrieve the direct parent and all other parents of an element, respectively.

The parentUntil() method discovers parent items between two specified elements.

This manual explains each of these techniques and provides examples that are pertinent to it.

I hope this article on how to get parent element in jQuery helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪