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.
This question is related to
javascript
html
getelementbyid
var parentDiv = pDoc.parentElement
edit: this is sometimes parentNode
in some cases.
https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement
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 ??
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 -->
This might help you.
ParentID = pDoc.offsetParent;
alert(ParentID.id);
The property pDoc.parentElement
or pDoc.parentNode
will get you the parent element.
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 && el.parentNode) {
el = el.parentNode;
if (el.tagName && 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;
}
Source: Stackoverflow.com