JAVASCRIPT
Find the Closest Parent Matching a CSS Selector
Utilize the `closest()` method in JavaScript to efficiently traverse up the DOM tree and locate the nearest ancestor element matching a specific CSS selector.
// HTML Structure
/*
<div class="card-container">
<div class="card" data-card-id="1">
<h3>Product 1</h3>
<p>Description for product 1.</p>
<button class="add-to-cart-btn">Add to Cart</button>
</div>
<div class="card" data-card-id="2">
<h3>Product 2</h3>
<p>Description for product 2.</p>
<button class="add-to-cart-btn">Add to Cart</button>
</div>
</div>
<div id="statusMessage"></div>
*/
const cardContainer = document.querySelector('.card-container');
const statusMessage = document.getElementById('statusMessage');
if (cardContainer && statusMessage) {
cardContainer.addEventListener('click', (event) => {
// Use closest() to find the nearest ancestor with class 'card'
const clickedCard = event.target.closest('.card');
if (clickedCard) {
console.log('Clicked inside a card.');
const cardId = clickedCard.getAttribute('data-card-id');
// Check if the actual clicked element was an 'Add to Cart' button
if (event.target.classList.contains('add-to-cart-btn')) {
statusMessage.textContent = `Added Product ${cardId} to cart!`;
statusMessage.style.color = 'green';
console.log(`Adding product ${cardId} to cart.`);
} else {
statusMessage.textContent = `You clicked card ${cardId}.`;
statusMessage.style.color = 'blue';
console.log(`Clicked on card ${cardId} itself or a non-button element within it.`);
}
} else {
statusMessage.textContent = 'Clicked outside any product card.';
statusMessage.style.color = 'red';
console.log('Clicked outside any card.');
}
});
}
How it works: The `Element.closest()` method is a powerful tool for DOM traversal, allowing you to find the nearest ancestor (or the element itself) that matches a given CSS selector, starting from the current element and moving up the DOM tree. This snippet demonstrates its utility in event handling, where a click on a child element can easily identify its relevant parent component, enabling highly efficient and readable event logic for nested structures.