Open In App

Closest ancestor element that has a specific class in JavaScript

Improve
Improve
Like Article
Like
Save
Share
Report

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, class) {
                while ((el = el.parentNode) &&
                       el.className.indexOf(class) < 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: 
 



Last Updated : 03 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads