JAVASCRIPT
Find the Closest Ancestor Element by Selector
Efficiently navigate the DOM to find the nearest parent element that matches a specific CSS selector, useful for event handling and component logic.
<div class="container">
<div class="card">
<header class="card-header">
<h2 class="card-title">Card Title</h2>
</header>
<div class="card-body">
<button class="action-btn">Click Me</button>
</div>
</div>
</div>
<script>
const actionBtn = document.querySelector('.action-btn');
actionBtn.addEventListener('click', (event) => {
// Find the closest ancestor with the class 'card'
const closestCard = event.target.closest('.card');
if (closestCard) {
console.log('Clicked button inside card:', closestCard.querySelector('.card-title').textContent);
closestCard.style.border = '2px solid red';
} else {
console.log('No closest card found.');
}
});
</script>
How it works: The `Element.closest()` method is an incredibly useful DOM traversal function. It starts from the element itself and traverses up the DOM tree, checking each ancestor (including itself) to see if it matches the provided CSS selector. It returns the first matching ancestor found or `null` if no match is found. This is particularly handy for scenarios like event delegation where you need to find a specific parent element of the `event.target`.