Say I have the following markup:

<div class="parent">
    <div class="child">
        <div class="grand-child">

And I want to get .parent starting from .grand-child. I can do either of the following two:

$('.grand-child').parent().parent();
$('.grand-child').closest('.parent');

Overall, closest() feels like a nicer approach since:

1. Only one function
2. It is irrelevant to other divs between the .grand-child and .parent

Specifically, due to advantage of #2 above, if I were to change my markup to

<div class="parent">
    <div class="child">
        <div class="nanny">
            <div class="grand-child">

Then I need to add an extra parent() but closest() still functions fine.

So is there a reason why you would ever choose parent() or closest()?

Say I have the following markup:

<div class="parent">
    <div class="child">
        <div class="grand-child">

And I want to get .parent starting from .grand-child. I can do either of the following two:

$('.grand-child').parent().parent();
$('.grand-child').closest('.parent');

Overall, closest() feels like a nicer approach since:

1. Only one function
2. It is irrelevant to other divs between the .grand-child and .parent

Specifically, due to advantage of #2 above, if I were to change my markup to

<div class="parent">
    <div class="child">
        <div class="nanny">
            <div class="grand-child">

Then I need to add an extra parent() but closest() still functions fine.

So is there a reason why you would ever choose parent() or closest()?

• javascript
• jquery

• 1 Maybe you will have to get access to element's parent and you will not care (or even don't know) what it is. Then you come exactly to the usage of .parent() – Regent Commented Jul 27, 2014 at 17:41
• There are many differences and needs in using parent() and closest() function in jquery.It depends on what your need actually.. See the difference between them here – Avinash Babu Commented Jul 27, 2014 at 17:42
• It would appear that your application is very suitable for closest. But if you only ever wanted one level up, for example, then parent would be most useful. The advantage of parent is that you don't need the tag to find it. It all depends upon your requirements. – lurker Commented Jul 27, 2014 at 17:42
• lots of cases where parent is suitable. Suppose you don't know what class or ID it is or even tag but you know you want the actual parent? closest() is more effective for specific targets though, especially when not sure how far away they are – charlietfl Commented Jul 27, 2014 at 17:44
• Beware that closest actually checks the element itself. jsfiddle.net/tarabyte/A7ngQ – Yury Tarabanko Commented Jul 27, 2014 at 18:06

2 Answers 2

you should use $('.grand-child').closest('.parent'); because .parent().parent() is strongly based on your html structure if in future you add another div inside one of these then you will get wrong element using parent().parent()

Suppose you have html like:

<div class="parent">
    <div class="child">
        <div class="grand-child-container">
             <div class="grand-child">

now what will happen if you use .parent().parent() it will give you wrong element, so recommended way is to use closest() as it is much better.

According to docs:

parent() gets the parent of each element in the current set of matched elements, optionally filtered by a selector.

closest() For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Differences:

if you scroll little down you can see differences between these two by official jquery site.

There are also some more good answers available on differences between these two:

parent vs closest

Difference between jQuery parent(), parents() and closest() functions

Performance:

Also performance wise closest() is better than parent(), you can check Benchmark between closest() and parent()

If you look at the code, .parent() is basically just a wrapper for the DOM call .parentNode. It's very quick and efficient, since it's essentially a single call to a browser built-in.

https://github.com/jquery/jquery/blob/master/src/traversing.js#L133

.closest(selector) is indeed much safer, because it guarantees you don't loop up past, or don't loop too briefly and stop before, you arrive at the intended parent - regardless of the actual shape of the DOM. But it's obviously also much more expensive. Look at the code:

https://github.com/jquery/jquery/blob/master/src/traversing.js#L63

That it's a loop at all is inherently pricier. It's also doing a lot more checks each iteration. In a very deep DOM, if you're for example using .closest to ask "Is this tag a child of X?" it will loop up the entire DOM tree to the body tag with no other bound. If you're 1000 tags deep that's 1000 pointless loops to find it. The same can occur if you're simply wrong about where the tag you're calling this is placed.

So, .parent() is highly efficient for a DOM where you're very certain about the structure. .closest(selector) is for less-trusted DOMs, although somewhat dangerous if you have no idea what the DOM looks like.