Getting the parent div of element

user_181805 0
Viewed 392046

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: 

<div id="test">
    <p id="myParagraph">Testing</p>
</div>

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.

getelementbyid html javascript
7 Answers

I had to do recently something similar, I used this snippet:

const getNode = () =>
  for (let el = this.$el; el && 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 ✌️

user_93832580
Related