Closest ancestor element that has a specific class in JavaScript

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:  
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?