Get parent element by jQuery/JavaScript

We can use JavaScript to get parent element or jQuery to get parent element but which one would be best for you is up to your need and familiarity with JavaScript and jQuery. In this article we will take different conditions and examples to show how jquery finds parent element and same case with JavaScript.

First we will see the simplest form of parent of any element

<div id="div1">
    <div id="div2">
        <input type="button" id="btn1" value="button1" />
    </div>
    <input type="button" id="btn2" value="button2" />
</div>

So in this case for button1 parent is div2 while for button2 parent is div1 so how to get them by using jquery or JavaScript

// By using JavaScript
document.getElementById("btn1").parentNode; // result: div2
document.getElementById("btn2").parentNode; // result: div1

// By using jQuery
$("#btn1").parent();// result: div2
$("#btn2").parent();// result: div1

Now we will see a complicated case and will try to get parent element by using jQuery and JavaScript, suppose we have following HTML

 <div id="outerDiv">     
   <table>
      <tr>
         <td>
            <input id="btn1" type="button" value="button1" />
         </td>
         <td>
            <div id="innerDiv">
              <input id="btn2" type="button" value="button2" />
            </div>
          </td>
      </tr>
   </table>
 </div>

We already discussed how to get first parent but we don’t know how to get the first parent of a particular element type, say we want to get the first parent of type tr for both the button bbuttontn1 and button2, its really easy see this

$(this).parents('tr:first'); // result: tr element
OR
$(this).closest('tr'); // result: tr element

What will happen if we will use div in place of tr, like this

$(this).parents('div:first');
OR
$(this).closest('div'); 

Any guess? button1 will get his parent as outerDiv while button2 will get his parent as innerDiv.

jQuery nth parent : How to get the nth parent of any element? We can use parents().eq(N) to get nth parent of any element, so see to get first, second, third ….. parent of button2 we can use

$(this).parents().eq(0); // result: innerDiv
$(this).parents().eq(1); // result: td
$(this).parents().eq(2); // result: tr
$(this).parents().eq(3); // result: table
$(this).parents().eq(4); // result: outerDiv

jQuery parent with a particular id or name: Suppose we want to get parent having id “outerDiv” for button2 then

$(this).parents('#outerDiv');
OR
$(this).parents('#outerDiv');

As you can notice in most cases we have not used classic JavaScript because those are quite complicated, we would need to use parentNode.parentnode .....and check every time is this the correct parent which I need so I will suggest to use jQuery in place of classic JavaScript because it is easy and handy to read, write and remember.

Other blogs you may like

MVC jQuery datepicker enable disable dates

Add, enable, disable dates to datepicker control is really more than easy but I found most beginners struggle with it to add datepicker with a control or to enable and disable dates for a particular condition. In this article we will learn how to add datepicker without any calendar icon as well as... By Ali Adravi   On 15 Mar 2015  Viewed: 10,207

jQuery and chexkbox

Whenever I need to use jquery with checkbox different functionality I always search for different sites to get my answer so I decided to write a small article to keep all the jquery functionality with checkbox at a single place, so trying to keep everything here. ***To get a checkbox on a page... By Ali Adravi   On 16 Nov 2012  Viewed: 904

Angularjs jQuery UI Datepicker disable dates conditionally

Angularjs jquery calendar with minimum code to attach datepicker, how to extend to restrict the dates from a particular day, month or year, how to make calendar to validate start and end date from one control to other after user selection, how to format date before rendering or how to disable... By Ali Adravi   On 26 Dec 2017  Viewed: 5,173

Maneuver DOM Elements in ASP.Net with JQuery

JQuery, a popular open source JavaScript library, is CSS3 compliant. With JQuery, you can easily maneuver the DOM elements in your web page. Basically, it allows you to add/delete DOM elements to your HTML based content. If you want to manipulate the DOM elements using JQuery and Visual Studio,... By Deepa Ranganathan   On 31 Aug 2015  Viewed: 886

Rotating banner simplest way with jquery and css

Rotating banner appeals most of the client and it's quite time consuming for developers to judge which library they need to use and do modification in them according to their requirements. In this article we are going to create the simplest and fully working rotating banner by writing just two... By Ali Adravi   On 18 Apr 2015  Viewed: 7,364