How to check parents (and grand parents) class in adding event listeners for dynamic content?

Question

How to make sure that the element clicked has got parent or grandparent with certain class?

document.getElementById("app").innerHTML = `
<div class="dynamic">
  <div class="level1">
    <h2 class="title">I am a title</h2>
      <div class="level2">
      <h3 class="subtitle">I am a subtitle</h3>
        <div class="level3">
          <p class="hello">Hello, I am a paragraph</p>
          <p class="bye">Bye</p>
      </div>
    </div>
  </div>
</div>
`;

document.addEventListener("click", function(e) {
  // pseudocode mode start
  // if (clicked e.target is or has got a parent(or grandparent or grandgrandparent) with class "dynamic")
  // (so clicking enywhere in dynamic div (both the paragraphs, the title and subtitle will result in action))
  // pseudocode mode stop
});

You can use recursive search, checking parents until some condition is true, or even until you reach element. — Gena Moroz, Jan 29 '19 at 16:05

score 1 · Accepted Answer · answered Jan 29 '19 at 16:07

1

function findParent(el){
 if(el.tagName == 'BODY') return false;
 if(el.parent.className.indexOf('myClass')>-1) return true;
 return findParent(el.parent);
}

//click handler start 

if(findParent(e.target)){
  //do your dirty things    
}

//click handler end

answered Jan 29 '19 at 16:07

Gena Moroz

929
5
9

Sweet :) Thank you :) – Dom Jan 29 '19 at 16:14

How to check parents (and grand parents) class in adding event listeners for dynamic content?

1 Answers1