jQuery Parent Elements: parent, parents and closest Compared

This article covers how to get an element’s parent or ancestors in jQuery, and when to use each method.

The short answer: use .parent() for the immediate parent, .closest() to find the nearest ancestor matching a selector, and .parents() to collect all of them. In practice .closest() is the one you reach for most.

▼Choosing a method

Each is explained below with code, along with the plain JavaScript equivalent.

Getting the parent of an element

Using .parent()

.parent() returns only the direct parent. It looks exactly one level up.

<div class="container">
  <p>An example of getting the parent element.</p>
</div>

const childElement = $('.container p');
const parentElement = childElement.parent();

parentElement is <div class="container">.

Passing a selector filters the result: the parent is returned only if it matches, and the set is empty otherwise.

// returns the parent only if it is .container
$('.container p').parent('.container');

Using .parents()

.parents() returns every ancestor, all the way up to the html element.

<div class="grandparent">
  <div class="parent">
    <p>An example of getting ancestors.</p>
  </div>
</div>

const childElement = $('.parent p');
const ancestorElements = childElement.parents();

ancestorElements contains <div class="parent"> then <div class="grandparent">, nearest first — and in a real document, body and html as well.

Pass a selector to narrow it:

// only div ancestors
$('.parent p').parents('div');

Finding the nearest matching ancestor

Using .closest()

.closest() returns at most one element: the nearest ancestor that matches. It stops walking up as soon as it finds a match.

It differs from .parents() in two ways. It returns one element at most, and it tests the element itself before moving up.

<ul class="list">
  <li class="item">
    <button class="delete">Delete</button>
  </li>
</ul>

$('.delete').on('click', function () {
  // remove only the row the clicked button belongs to
  $(this).closest('.item').remove();
});

Walking from a clicked element up to the row or card it belongs to is an extremely common pattern. For that job, .closest('.item') is both faster and clearer than .parents('.item').first().

If the element itself matches, the element itself is returned:

$('.item').closest('.item'); // the .item itself

Limiting how far up you go

Using .parentsUntil()

.parentsUntil() collects ancestors up to, but not including, the element you name as the stop point.

<div class="grandparent">
  <div class="parent">
    <p>An example of limiting ancestors.</p>
  </div>
  <div class="uncle">
    <p>A sibling branch.</p>
  </div>
</div>

const childElement = $('.uncle p');
const ancestorElements = childElement.parentsUntil('.grandparent');

ancestorElements contains <div class="uncle">. Walking up from .uncle p the first ancestor is .uncle, and the next one is .grandparent, which is the stop point and therefore excluded.

Only ancestors on the path actually walked are returned. .parent sits in a sibling branch, so it never appears in the result. This is the part people get wrong, so keep the path in mind rather than the visual layout.

The same thing in plain JavaScript

None of this requires jQuery. closest() exists on DOM elements under the same name.

▼jQuery and plain JavaScript

The delete-button example again, without jQuery:

document.querySelectorAll('.delete').forEach((button) => {
  button.addEventListener('click', () => {
    button.closest('.item').remove();
  });
});

closest() is supported in every major browser. Loading jQuery purely to walk up the DOM is not worth it.

To collect every ancestor, loop:

function getParents(el) {
  const result = [];
  let current = el.parentElement;
  while (current) {
    result.push(current);
    current = current.parentElement;
  }
  return result;
}

parentElement and parentNode look similar, but parentNode can return non-element nodes such as the document itself. Use parentElement when you only want elements.

Which one to reach for

If the task is “from the clicked element, find the block it belongs to”, the answer is .closest(). That covers most real cases.

Using .parents() and then .first() walks the entire ancestor chain before discarding all but one result. .closest() stops at the first match, and the gap grows with nesting depth.

.parent() is for when the structure is fixed and one level is exactly what you mean. Because it carries no selector, it breaks silently if the markup changes — in layouts that might gain a wrapper later, .closest() is the safer choice.

Both 5 ways to build a jQuery dropdown menu and building an accordion menu rely on this kind of traversal to find the panel belonging to a clicked heading.