`Element.closest` în JavaScript

Urcă de la element spre părinți și returnează primul care se potrivește cu un selector CSS.

Sintaxă

element.closest(selectorCss)

Ce face `Element.closest`

closest verifică întâi elementul însuși, apoi părintele, bunicul și așa mai departe, până găsește un element care se potrivește cu selectorul. Dacă nu găsește nimic, returnează null.

Este piesa de bază a delegării evenimentelor: un singur ascultător pe un container prinde clicurile pe toate elementele din el, iar e.target.closest(".card") găsește elementul care te interesează, chiar dacă s-a dat clic pe o imagine sau un text din interiorul lui.

Parametri

Parametru	Descriere
`selectorCss`	Un selector CSS.

Ce returnează

Elementul găsit sau null.

Exemple

Exemplul 1: Delegarea evenimentelor

Rezultatul după un clic pe textul „Cablu”.

<ul id="produse">
  <li class="produs" data-id="7"><img src="mouse.jpg"><span>Mouse</span></li>
  <li class="produs" data-id="9"><img src="cablu.jpg"><span>Cablu</span></li>
</ul>

<script>
  document.getElementById("produse").addEventListener("click", (e) => {
    const produs = e.target.closest(".produs");
    if (!produs) return;
    console.log("ales:", produs.dataset.id, e.target.tagName);
  });
</script>

Rezultat în browser

ales: 9 SPAN

Exemplul 2: Elementul însuși și lipsa potrivirii

const span = document.querySelector(".produs span");

console.log(span.closest("span") === span);
console.log(span.closest("ul").id);
console.log(span.closest("table"));