Getting the parent div of element

Question

This should be really simple but I m having trouble with it  How do I get a parent div of a child element   My HTML     lt div id  test  gt       lt p id  myParagraph  gt Testing lt  p gt   lt  div gt    My JavaScript    var pDoc   document getElementById  myParagraph    var parentDiv                   I would have thought document parent or parent container would work but I keep getting not defined errors  Note that the pDoc is defined  just not certain variables of it   Any ideas   P S  I would prefer to avoid jQuery if possible

User · Answer

Knowing the parent of an element is useful when you are trying to position them out the "real-flow" of elements.

Below given code will output the id of parent of element whose id is provided. Can be used for misalignment diagnosis.

<!-- Patch of code to find parent -->
<p id="demo">Click the button </p>
<button onclick="parentFinder()">Find Parent</button>
<script>
function parentFinder()
{
    var x=document.getElementById("demo"); 
    var y=document.getElementById("*id of Element you want to know parent of*");
    x.innerHTML=y.parentNode.id;
}
</script>
<!-- Patch ends -->

User · Answer

This might help you   ParentID   pDoc offsetParent  alert ParentID id

User · Answer

You re looking for parentNode  which Element inherits from Node   parentDiv   pDoc parentNode    Handy References    DOM2 Core specification - well-supported by all major browsers DOM2 HTML specification - bindings between the DOM and HTML DOM3 Core specification - some updates  not all supported by all major browsers HTML5 specification - which now has the DOM HTML bindings in it

User · Answer

The property pDoc parentElement or pDoc parentNode will get you the parent element

User · Answer

var parentDiv   pDoc parentElement  edit  this is sometimes parentNode in some cases   https   developer mozilla org en-US docs Web API Node parentElement

User · Answer

If you are looking for a particular type of element that is further away than the immediate parent  you can use a function that goes up the DOM until it finds one  or doesn t      Find first ancestor of el with tagName    or undefined if not found function upTo el  tagName      tagName   tagName toLowerCase       while  el  amp  amp  el parentNode        el   el parentNode      if  el tagName  amp  amp  el tagName toLowerCase      tagName          return el                  Many DOM methods return null if they don t       find the element they are searching for      It would be OK to omit the following and just      return undefined   return null

User · Answer

I had to do recently something similar  I used this snippet  const getNode        gt    for  let el   this  el  el  amp  amp  el parentNode  el   el parentNode       if     insert your condition here     return el        return null     The function will returns the element that fulfills your condition  It was a CSS class on the element that I was looking for  If there isn t such element then it will return null In case somebody would look for multiple elements it only returns closest parent to the element that you provided  My example was  if  el classList  contains  o-modal    return el  I used it in a vue component  this  el  change that to your document getElementById function and you re good to go  Hope it will be useful for some people

[javascript] Getting the parent div of element

Examples related to javascript

Examples related to html

Examples related to getelementbyid