Element.closest()
element.closest(selector)
Geht vom Element den Seitenbaum hinauf (das Element, sein Elternelement, Großelternelement…) und gibt das erste zurück, das zum Selektor passt. Gibt es keins, liefert sie null.
Das Beispiel arbeitet mit dem HTML über dem Code. Ein mit console.log ausgegebenes Element erscheint als sein öffnendes Tag.
Parameter
- selector – ein CSS-Selektor.
Rückgabewert
Ein Element oder null.
Beispiele
<table><tbody> <tr data-id="7"><td>Kaffee</td><td><button class="delete">Löschen</button></td></tr> <tr data-id="9"><td>Tee</td><td><button class="delete"><span>Löschen</span></button></td></tr> </tbody></table>
const label = document.querySelector('tr[data-id="9"] span');
console.log(label.closest('tr').dataset.id, label.closest('button').className);
console.log(label.closest('span') === label, label.closest('form'));
document.querySelector('tbody').addEventListener('click', (e) => {
const row = e.target.closest('tr');
if (e.target.closest('.delete')) console.log('lösche ID', row.dataset.id);
});
label.click();
Ausgabe:
9 delete true null lösche ID 9
Worauf Sie achten sollten
- Sie prüft auch das Element selbst, nicht nur die Vorfahren.
- Bei Event-Delegation (ein Handler am Elternelement) ist closest() zuverlässiger als
e.target– ein Klick auf ein verschachteltes<span>im Button hat dieses span als Ziel.
Browserunterstützung
Baseline – weithin verfügbar: in allen gängigen Browsern seit April 2017, gilt als weithin verfügbar seit Oktober 2019. Ab Version: Chrome 41, Firefox 35, Safari 6; nicht in Node.js (Browser-API). Stand: Oktober 2026 (MDN browser-compat-data).
Siehe auch:
Element.matches()
Node.parentElement
Event.target
EventTarget.addEventListener()