.closest()

The Element.closest() method searches for and returns the nearest (starting from the element itself) parent element that matches the specified CSS selector. If no element matches the specified CSS selector, it returns null.

For the element <div id="25" class="common">, let's find the nearest parent elements that match the selectors '.container' and 'div.common':

        
          
          <article class="container common">  <header class="container-header container">    <div id="25" class="common">      <span class="title">Title</span>    </div>  </header></article>
          <article class="container common">
  <header class="container-header container">
    <div id="25" class="common">
      <span class="title">Title</span>
    </div>
  </header>
</article>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          const element = document.querySelector('#25')const closestElement1 = element.closest('.container')const closestElement2 = element.closest('div.common')console.log(closestElement1)// <header class="container-header container">console.log(closestElement2)// <div id="25" class="common">
          const element = document.querySelector('#25')
const closestElement1 = element.closest('.container')
const closestElement2 = element.closest('div.common')

console.log(closestElement1)
// <header class="container-header container">

console.log(closestElement2)
// <div id="25" class="common">

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Element.closest() takes a string as an argument with the sought CSS selector.

If the string is not a valid CSS selector, a 'SyntaxError' DOMException will occur.

Element.closest() returns the Element that matches the specified CSS selector, or null if the sought element was not found.

The Element.closest() method allows you to search in the DOM for the nearest suitable element among parents, starting from the element for which the method was called.

A typical use case for Element.closest() is to determine the scope upon clicking. Suppose we have several buttons that are in nested containers. It is necessary to find the nearest container to the clicked button.

        
          
          <div class="container main-container">  <button id="1" class="button">Button 1</button>  <div class="container parent-container">    <button id="2" class="button">      <span class="button-content">Button 2</span>    </button>    <div class="container child-container">      <button id="3" class="button">Button 3</button>    </div>  </div></div>
          <div class="container main-container">
  <button id="1" class="button">Button 1</button>
  <div class="container parent-container">
    <button id="2" class="button">
      <span class="button-content">Button 2</span>
    </button>
    <div class="container child-container">
      <button id="3" class="button">Button 3</button>
    </div>
  </div>
</div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

To solve the problem, it is enough to add only one event handler for click:

        
          
          const mainContainer = document.querySelector('.main-container')mainContainer.addEventListener('click', function (e) {  // The element on which the click occurred  const targetElem = e.target  // Determine whether the click occurred  // on one of the buttons or inside it  const buttonElem = targetElem.closest('.button')  // If the click occurred outside the button, buttonElem === null  if (buttonElem === null) {    // If the click was not on a button, do nothing    e.stopPropagation()    return  }  const containerElem = targetElem.closest('.container')  // Output the container containing the pressed button to the console  console.log(containerElem)})
          const mainContainer = document.querySelector('.main-container')

mainContainer.addEventListener('click', function (e) {
  // The element on which the click occurred
  const targetElem = e.target

  // Determine whether the click occurred
  // on one of the buttons or inside it
  const buttonElem = targetElem.closest('.button')

  // If the click occurred outside the button, buttonElem === null
  if (buttonElem === null) {
    // If the click was not on a button, do nothing
    e.stopPropagation()
    return
  }

  const containerElem = targetElem.closest('.container')
  // Output the container containing the pressed button to the console
  console.log(containerElem)
})

        
        
          
            
            Copy
            Copied
            Failed to copy