jQuery .parent() Method

What You’ll Learn

The .parent() traversing method moves up one level in the DOM — it returns the immediate parent of each matched element, optionally filtered by a selector. This tutorial covers the official nested-list and parent-tag demos, comparisons with .parents(), .closest(), and .children(), and practical event-handling patterns.

Introduction

Every DOM element (except the document root) has a parent — the node that directly contains it. When you need that immediate wrapper — the ul around an li, the div around a clicked span — reach for .parent().

Available since jQuery 1.0, .parent([selector]) constructs a new jQuery object from the direct parent of each element in the current set. It travels exactly one level up — unlike .parents(), which keeps climbing — and unlike .closest(), which can match the element itself or ancestors several levels away.

Understanding the .parent() Method

Given a jQuery object representing a set of DOM elements, .parent() reads each element’s parentNode (for element parents). When you pass a selector, the parent is included in the result only if it matches — otherwise that branch contributes an empty set.

Think of it as the upward counterpart to .children(): children goes down one level; parent goes up one level. For deeper ancestor searches, use .parents() or .closest() instead.

📝 Syntax

General form of .parent:

.parent( [ selector ] )

Parameters

• selector (optional) — a string containing a selector expression. The immediate parent is included only if it matches this selector.

Return value

• A new jQuery object containing the immediate parent of each element in the current set (filtered when a selector is provided).

Official jQuery API nested list example

$( "li.item-a" ).parent().css( "background-color", "red" );

// Red on the ul that directly contains item A

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Use DevTools or the Try-it links to run each snippet in the browser.

$( "li.item-a" ).parent().css( "background-color", "red" );

Inner ul wrapping item A → red background

Outer lists and other items → unchanged

$( "*", document.body ).each(function() {

  var parentTag = $( this ).parent().get( 0 ).tagName;

  $( this ).prepend( document.createTextNode( parentTag + " > " ) );

});

Each element prefixed with its immediate parent's tag name

e.g. "DIV > ", "P > ", "SPAN > "

$( "p" ).parent( ".selected" ).css( "background", "yellow" );

div.selected wrapping a p → yellow background

Paragraphs whose parent lacks .selected → no match

$( "#parent-demo li.item-a" ).parent().css( "outline", "2px solid red" );

$( "#parents-demo li.item-a" ).parents( "ul" ).css( "outline", "2px solid blue" );



// .parent() → 1 ul | .parents("ul") → inner + outer ul

.parent() → red outline on inner ul only

.parents("ul") → blue outline on inner and outer ul

$( ".toolbar" ).on( "click", "button", function() {

  $( this ).parent().addClass( "active-group" );

});

Clicked button's immediate parent (.btn-group) → .active-group

Toolbar container → unchanged unless it is the direct parent

🚀 Common Use Cases

• Highlight containing list — $("li.active").parent("ul").addClass("has-active").
• Form field wrapper — $("input:invalid").parent(".field").addClass("error").
• Remove parent row — $("input:checked").parent("tr").remove() (when checkbox is direct child).
• DOM debugging — official pattern: prepend parent tag name to each node.
• Delegated click styling — style the immediate parent of the clicked child.
• Filter by parent type — $("span").parent("div") keeps spans whose direct parent is a div.

📝 Notes

• Available since jQuery 1.0 — optional selector argument filters the direct parent.
• Travels exactly one level up — not the same as .parents() or .closest().
• Does not include the starting element — only its parent (unlike .closest()).
• $("html").parent() returns document; $("html").parents() is empty.
• With a selector, only the immediate parent is tested — grandparents are not checked.
• Pushes onto jQuery’s internal stack — pair with .end() to restore the previous set.

💡 Best Practices