Check if Parent has specific Class using JavaScript

avatar

Borislav Hadzhiev

Sun Jan 02 20222 min read

banner

Photo by Ryan Moreno

Check if Parent has specific Class using JavaScript #

To check if a parent element has a specific class:

  1. Use the closest() method, passing it the class selector as a parameter.
  2. If a parent with the specific class exists, the method returns the element.
  3. If no parent with the provided class exists, the method returns null.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="parent-1"> <div class="parent2"> <div id="child">Box 1</div> </div> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
// โœ… Check if any of the parent elements have class `parent-1` const child = document.getElementById('child'); const parentHasClass = child.closest('.parent-1') !== null; console.log(parentHasClass); // ๐Ÿ‘‰๏ธ true // โœ… Check if DIRECT parent element has class `parent-1`. const directParentHasClass = child.parentElement?.classList.contains('parent-1'); console.log(directParentHasClass); // ๐Ÿ‘‰๏ธ false

We used the Element.closest() method to select a parent element with the class of parent-1.

The closest() method traverses the Element and its parents until it finds a node that matches the provided selector.

If the element itself matches the selector, the element is returned.

If no element that matches the provided selector exists, the closest() method returns null.

The parentHasClass variable stores a boolean value:

  • true if there is a parent element of the div with id of child that contains the parent-1 class.
  • false if there isn't.
This approach does not specifically checks if the direct parent element contains the class, it checks if a parent element anywhere in the hierarchy contains the provided class.

To check if the direct parent of the element has a specific class:

  1. Use the parentElement property to select the parent of the element.
  2. Use the classList.contains() method to check if the parent contains the class.
  3. The method returns true if the element's class list contains the class and false otherwise.
index.js
const child = document.getElementById('child'); // โœ… Check if DIRECT parent element has class `parent-1`. const directParentHasClass = child.parentElement?.classList.contains('parent-1'); console.log(directParentHasClass); // ๐Ÿ‘‰๏ธ false

The parentElement property returns the DOM node's parent element or null if the node has no parent or its parent is not a DOM element.

We used the optional chaining (?.) operator to short-circuit instead of throwing an error if the element has no parent.

The classList.contains method returns a boolean value - true if the class is contained in the element's class list and false otherwise.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee