jQuery .parent() Method

What Is .parent()?

.parent([selector]) (since jQuery 1.0) returns the immediate parent of each matched element — one level up. Optional selector keeps the parent only if it matches. Returns a new jQuery set; does not change the DOM.

$("li.item-a").parent();              // wrapping ul
$("p").parent(".selected");           // parent only if .selected
$(this).parent();                     // common in click handlers

// parent()   → one level up (direct parent)
// parents()  → all ancestors
// closest()  → nearest match (incl. self)
// children() → one level down

How to Use .parent()

Select a child, then step up one level to its wrapper.

1. Select the child element(s) — e.g. $("li.item-a").
2. Call .parent() to get each one’s immediate parent.
3. Or pass a selector: .parent(".selected") to filter.
4. Chain methods on the new set (.append(), .addClass(), …).
5. If the parent fails the filter, the result is empty for that start — no further climb.

Pseudocode

call $(children).parent(selector?)

result = empty set
for each child in the matched set:
    p = child.parentElement
    if p is null:
        skip
    else if no selector OR p matches selector:
        add p to result

return unique parents as a new jQuery object
(never climbs to grandparents)

Cheat Sheet

Keep these upward methods side by side.

Live Preview

From li.item-a, compare .parent(), .parents("ul"), and .closest("ul").

Ready — choose a call and click Run.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("li.item-a").parent().append(" [parent]");

Inner ul that wraps A gets [parent]
Outer list is unchanged

$("*", document.body).each(function () {
  var parentTag = $(this).parent().get(0).tagName;
  $(this).prepend(document.createTextNode(parentTag + " > "));
});

DIV > Hello SPAN > world
Each node is prefixed with its immediate parent tag

$("p").parent(".selected").append(" [selected parent]");

Only .selected wrappers of p get the mark
A plain div parent is skipped

$("#parent-demo li.item-a").parent().append(" [parent]");
$("#parents-demo li.item-a").parents("ul").append(" [parents]");

.parent() → inner ul only [parent]
.parents("ul") → inner and outer ul [parents]

$(".toolbar").on("click", "button", function () {
  $(".btn-group").find("[data-mark]").remove();
  $(this).parent().append(" [active]");
});

Click Save → its .btn-group shows [active]
Toolbar itself is not selected (grandparent)

Performance Notes

Prefer .parent() when the structure is fixed — one hop is enough.

Key Takeaways