The Element.closest() method starts at the element and walks up through parents toward the document root until it finds a node that matches a CSS selector (MDN). It returns that element (or null). The element itself is tested first.
Pass the required arguments shown below. Check return values and browser support before you rely on the result.
Call el.closest. Start with this line.
el.closest(selectors)| Call | What it does |
|---|---|
el.closest(selectors) | Primary signature. |
el.closest(...) | Call with the arguments your case needs. |
Built into the browser. Call closest(...) on an Element — no import required.
el.closest(selectors)| Parameter | Description |
|---|---|
| Starting element | Required. Where the upward walk begins |
| selectors | Required. Valid CSS selector string |
| Return Value | Description |
|---|---|
| * | Matching Element, or null |
From an inner element, find the nearest ancestor with a given id.
const el = document.getElementById("div-03");
const out = document.getElementById("out");
const found = el.closest("#div-02");
out.textContent = found ? found.id : "null";#div-03 is the current element."#div-02" is valid CSS.#div-02 matches.id.If the element itself matches, closest() returns it immediately.
const el = document.getElementById("card");
const out = document.getElementById("out");
const found = el.closest(".card");
out.textContent = found === el ? "matched self" : "ancestor";el.found === el confirms self.From a click target, find the nearest .item button (or ignore the click).
const list = document.getElementById("list");
const out = document.getElementById("out");
list.addEventListener("click", (event) => {
const item = event.target.closest(".item");
if (!item || !list.contains(item)) return;
out.textContent = "clicked " + item.textContent;
});event.target. The real click node may be nested text/span..item. closest finds the actionable ancestor.contains. Ignore matches outside this list.Element.closest() is Baseline Widely available on MDN (across browsers since April 2017). It is not Deprecated, Experimental, or Non-standard.
Standard upward CSS-selector walk for ancestors (and self). Widely available since 2017.
Bottom line: Safe for modern browsers. Prefer closest over manual parentElement loops.
Read computed CSS values as a Typed OM StylePropertyMapReadOnly.
22 people found this page helpful