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:

<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.

T.J. Crowder · Accepted Answer · 2015-07-11T12:24:29.823

427

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

edited Jul 11 '15 at 12:24

answered Jul 28 '11 at 09:38

T.J. Crowder

1,031,962
187
1,923
1,875

RobG · Answer 2 · 2021-10-22T04:12:51.443

52

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;
}

Edit 2021

Element.closest is part of the DOM standard. It takes a selector as an argument and returns the first matching ancestor or null if there isn't one.

edited Oct 22 '21 at 04:12

answered Jul 28 '11 at 09:57

RobG

142,382
31
172
209

with jQuery : el.closest(tagName) – Ullullu Jul 06 '15 at 18:35
14

@Ullullu—let's see, 10,000 lines of library or a 10 line function? ;-) – RobG May 08 '17 at 11:40
@Ullullu's suggestion was really helpful, thanks. – quant Oct 22 '21 at 01:57
@quant—you don't need jQuery for [*Element.closest*](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest). :-) – RobG Oct 22 '21 at 04:05
2

@RobG cool, all the more reason to use it instead of writing your own. You should move that 2021 edit to the top of the your response as I think it's the right answer. – quant Oct 22 '21 at 06:29

score 18 · Answer 3 · answered Jul 28 '11 at 09:39

18

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

answered Jul 28 '11 at 09:39

Thor Jacobsen

8,621
2
27
26

12

But what's the difference? – Ben Wheeler Aug 14 '20 at 01:22
1

The difference is well explained here: https://stackoverflow.com/questions/8685739/difference-between-dom-parentnode-and-parentelement – Jonathan Elkins Oct 01 '22 at 09:12

score 4 · Answer 4 · answered Aug 16 '16 at 21:02

4

var parentDiv = pDoc.parentElement

edit: this is sometimes parentNode in some cases.

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement

answered Aug 16 '16 at 21:02

LoganDark

76
4

score 1 · Answer 5 · answered Aug 27 '20 at 14:35

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 ✌️

score 0 · Answer 6 · edited Jan 17 '13 at 07:30

0

This might help you.

ParentID = pDoc.offsetParent;
alert(ParentID.id);

edited Jan 17 '13 at 07:30

NoNaMe

6,020
30
82
110

answered Jan 17 '13 at 07:12

Sinan ÇALIŞKAN

225
2
8

score 0 · Answer 7 · edited Aug 23 '14 at 08:17

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 -->

Getting the parent div of element

7 Answers7

Edit 2021

Linked

Related