JavaScript How to get parent element by selector

Question

Example    lt div someAttr  parentDiv  We need to get it from child   gt       lt table gt                lt td gt   lt div id  myDiv  gt  lt  div gt   lt  td gt           lt  table gt   lt  div gt    I want to get parent by some selector from inner div element  in example with myDiv class   How to get it WITHOUT jQuery  only JS   Something like    var div   document getElementById  myDiv    div someParentFindMethod  some selector

User · Answer

I thought I would provide a much more robust example, also in typescript, but it would be easy to convert to pure javascript. This function will query parents using either the ID like so "#my-element" or the class ".my-class" and unlike some of these answers will handle multiple classes. I found I named some similarly and so the examples above were finding the wrong things.

function queryParentElement(el:HTMLElement | null, selector:string) {
    let isIDSelector = selector.indexOf("#") === 0
    if (selector.indexOf('.') === 0 || selector.indexOf('#') === 0) {
        selector = selector.slice(1)
    }
    while (el) {
        if (isIDSelector) {
            if (el.id === selector) {
                return el
            }
        }
        else if (el.classList.contains(selector)) {
            return el;
        }
        el = el.parentElement;
    }
    return null;
}

To select by class name:

let elementByClassName = queryParentElement(someElement,".my-class")

To select by ID:

let elementByID = queryParentElement(someElement,"#my-element")

User · Answer

You may use closest   in modern browsers   var div   document querySelector  div myDiv    div closest  div someAtrr       Use object detection to supply a polyfill or alternative method for backwards compatability with IE

User · Answer

Here is simple way to access parent id  document getElementById  child1   parentNode    will do the magic for you to access the parent div    lt html gt   lt head gt   lt  head gt   lt body id  body  gt   lt script gt  function alertAncestorsUntilID     var a   document getElementById  child   parentNode  alert a id      lt  script gt   lt div id  master  gt  Master  lt div id  child  gt Child lt  div gt   lt  div gt   lt script gt  alertAncestorsUntilID     lt  script gt   lt  body gt   lt  html gt

User · Answer

Here s the most basic version   function collectionHas a  b      helper function  see below      for var i   0  len   a length  i  lt  len  i               if a i     b  return true            return false    function findParentBySelector elm  selector        var all   document querySelectorAll selector       var cur   elm parentNode      while cur  amp  amp   collectionHas all  cur       keep going up until you find a match         cur   cur parentNode    go up           return cur    will return null if not found    var yourElm   document getElementById  yourElm      div in your original code var selector     yes   var parent   findParentBySelector yourElm  selector

User · Answer

simple example of a function parent by selector which return a parent or null  no selector matches    function parent by selector node  selector  stop selector    body       var parent   node parentNode    while  true        if  parent matches stop selector   break      if  parent matches selector   break      parent   parent parentNode     get upper parent and check again       if  parent matches stop selector   parent   null     when parent is a tag  body  - gt  parent not found   return parent

User · Answer

Finds the closest parent  or the element itself  that matches the given selector  Also included is a selector to stop searching  in case you know a common ancestor that you should stop searching at   function closest el  selector  stopSelector      var retval   null    while  el        if  el matches selector           retval   el        break       else if  stopSelector  amp  amp  el matches stopSelector           break           el   el parentElement        return retval

User · Answer

Using leech s answer with indexOf  to support IE   This is using what leech talked about  but making it work for IE  IE doesn t support matches    function closest el  selector  stopSelector      var retval   null    while  el        if  el className indexOf selector   gt  -1          retval   el        break       else if  stopSelector  amp  amp  el className indexOf stopSelector   gt  -1          break           el   el parentElement        return retval      It s not perfect  but it works if the selector is unique enough so it won t accidentally match the incorrect element

User · Answer

Here s a recursive solution   function closest el  selector  stopSelector      if  el     el parentElement  return null   else if stopSelector  amp  amp  el parentElement matches stopSelector   return null   else if el parentElement matches selector   return el parentElement   else return closest el parentElement  selector  stopSelector

User · Answer

var base element   document getElementById    EXAMPLE ELEMENT      for  var found parent base element  i 100  found parent parentNode  amp  amp    found parent found parent parentNode  classList contains    CLASS NAME      amp  amp  i gt 0  i--    console log  found parent

[javascript] JavaScript: How to get parent element by selector?

To select by class name:

To select by ID:

Examples related to javascript

Examples related to dom