Skip to content
Related Articles

Related Articles

Closest ancestor element that has a specific class in JavaScript
  • Last Updated : 02 Jun, 2020

The task is to find the closest ancestor of the element of specific class with the help of pure Javascript. There are two approaches that are discussed below.

Approach 1:  Use the Javascript selector to select the element. Use closest() method to get the closest parent with specific class. 
 

Example: This example implements the above approach. 

html




<!DOCTYPE HTML>  
<html>  
    <head
        <title
            Find closest ancestor element that has a 
            specific class using pure JavaScript
        </title>        
    </head>
    <body style = "text-align:center;">  
        <h1 style = "color:green;" >  
            GeeksforGeeks  
        </h1>
        <p id = "GFG_UP">
        </p>
  
        <div name = "parentDIV" class="parent">
          <div class="child">
          </div>
        </div>
        <button onclick = "myGFG()">
        click here
        </button>
        <p id = "GFG_DOWN">
        </p>
  
        <script>     
            var up = document.getElementById("GFG_UP"); 
            up.innerHTML = "Click on button to see result";
            var down = document.getElementById("GFG_DOWN"); 
            function myGFG() {  
                var el = document.querySelector("div")
                .closest(".parent")
                down.innerHTML = "Element of name '"
                  + el.getAttribute("name") 
                  + "' is the parent element of specific class."; 
            
        </script
    </body>  
</html>

Output: 



Approach 2 : Keep moving to the parents of the element until find the specific class. Use the element.className.indexof() method to select the element of particular class. 
 

Example: This example implements the above approach. 

html




<!DOCTYPE HTML>  
<html>  
    <head
        <title
            Find closest ancestor element that has a 
            specific class using pure JavaScript
        </title>        
    </head>
    <body style = "text-align:center;">  
        <h1 style = "color:green;" >  
            GeeksforGeeks  
        </h1>
        <p id = "GFG_UP">
        </p>
  
        <div name = "parentDIV" class="parent">
          <div class="child">
          </div>
        </div>
        <button onclick = "myGFG()">
        click here
        </button>
        <p id = "GFG_DOWN">
        </p>
  
        <script>     
            var up = document.getElementById("GFG_UP"); 
            up.innerHTML = "Click on button to see result";
            var down = document.getElementById("GFG_DOWN");
            function findParent(el, clas) {
                while ((el = el.parentNode) && 
                       el.className.indexOf(clas) < 0);
                return el;
            }
            function myGFG() {  
                var el = document.querySelector(".child");
                var el = findParent(el, 'parent');
                down.innerHTML = "Element of name '" 
                  + el.getAttribute("name") 
                  + "' is the parent element of specific class."; 
            
        </script> 
    </body>  
</html>

Output: 
 

My Personal Notes arrow_drop_up
Recommended Articles
Page :