Hello this code gets tells me if current element has class.

e.srcElement.className.indexOf('thisClass') === 0  

How do i also check if element or any of its parents have the class?

Hello this code gets tells me if current element has class.

e.srcElement.className.indexOf('thisClass') === 0  

How do i also check if element or any of its parents have the class?

• javascript
• dom

• 2 Where are the ancestor elements ? Please provide HTML as well.. – Rayon Commented Jan 5, 2016 at 4:54
• ancestor elements don't matter, it could have infinity divs wrapped around it – B Hull Commented Jan 5, 2016 at 4:58
• Question seems incomplete to me. A proper markup would give us more idea about the post.. – Rayon Commented Jan 5, 2016 at 5:02
• similar: stackoverflow.com/q/16863917 – djvg Commented Mar 20, 2023 at 10:46

5 Answers 5

Nowadays one can use the widely supported JavaScript closest method.

const parentHasClass = element.closest('.thisClass');

Using the parentNode of an element, it's possible to go through the parents list.
Use the following function:

function elementOrAncestorHasClass(element, className) {
  if (!element || element.length === 0) {
    return false;
  }
  var parent = element;
  do {
    if (parent === document) {
      break;
    }
    if (parent.className.indexOf(className) >= 0) {
      return true;
    }
  } while (parent = parent.parentNode);
  return false;
}

This fiddle shows the function in action.

You just need to traverse the DOM. To go one parent up, use parentNode.

Do traverse infinitely upwards, you'll need to use a loop:

for(var i = 0; i < nodes.length; i++) {
  // check if each parentNode has the class
}

It's a tedious process. That's why libraries like jQuery exist for the sole purpose of DOM traversal/manipulation.

I can offer to use next methods:

function hasClass(element, className) {
    return !(!className || !element || !element.className 
    || !element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')));
}

function parentByClass(childElement, className) {
    if (!childElement || childElement === document) {
        return null;
    } else if (hasClass(childElement, className)) {
        return childElement;
    } else {
        return parentByClass(childElement.parentNode, className)
    }
}

function hasClassInTree(element, className) {
    return hasClass(element, className) || parentByClass(element, className)
}

So in you case condition will be

if (hasClassInTree(e.srcElement, 'thisClass')) { ... }

May be its easier to find all the elements that have the class, and check if any of them contain the current node (not tested code):

   function checkParentClass(e,className){
      var nodesWithClass =document.getElementsByClassName("className");

      var index =0;
      var found = false;

      while(index< nodesWithClass.length && !found){
         if (nodesWithClass[index].contains(e))
         {
            found = true;
         }
         index++;
      }

      return found;
    }