Alternative to .parentElement?

Question

I have a function that needs to go through alot of parentElements to get an id. Instead of writing if( element.parentElement.parentElement.parentElement.id == "target" ){ doThis() } Is there a way in javascript just to say "If there is a parent element with "this id" doThis()" ? Instead of going through all those parentElements is there a way to just say if there is ANY element that is a parent to the current element with this ID, then doThis()?

EDIT

Many have said i should just getElementById and maybe that is the solution, but let me show you a example of my code so you can see a little better what I'm doing:

I have alot of divs with the same function. lets call it clicked().

so say i have 20 divs that look like this: <div onclick = "clicked( this )">Content</div>

Lets say these divs are contained within a few other divs:

<div id = "container">
    <div id = "top">
       <div id = "left">
           <div onclick = "clicked( this )">Content</div>
           <div onclick = "clicked( this )">Content2</div>
           ...
       </div>
    </div>
</div>

my clicked function looks like:

function clicked( element ){
    if( element.parentElement.parentElement.parentElement.id == 'container' ){ 
        doThis();
    }
}

`ID`s should be **unique**. So you can use `document.getElementById()` — PM 77-1, Jan 11 '15 at 00:18
I'd just use a `while()` loop to cycle through the parent elements until you find it.... but since an `id` is support to be unique, why not just select the element directly, *then* perform your conditional check from there? — Josh Crozier, Jan 11 '15 at 00:18
@PM 77-1 All my IDs are unique. The reason I didn't want to use `document.getElementById` is because I don't want to repeat code for each id. I have alot. — , Jan 11 '15 at 00:20
here is solution http://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/ — msangel, Jan 11 '15 at 00:21
Related: [How to check in Javascript if one element is a child of another](http://stackoverflow.com/questions/2234979/how-to-check-in-javascript-if-one-element-is-a-child-of-another) — Jonathan Lonowski, Jan 11 '15 at 00:25
If you can use `jQuery` then look at [`closest()`](http://api.jquery.com/closest/). — PM 77-1, Jan 11 '15 at 00:25

score 2 · Accepted Answer · answered Jan 11 '15 at 00:26

2

You can write a function to search the parent hierarchy:

function parentWithId(elem, id) {
   while (elem = elem.parentNode && elem !== document.body) {
       if (elem.id === id) {
           return elem;
       }
   }
   return null;
}

var p = parentWithId(element, "target");
if (p) {
    doThis();
}

Or, you could even incorporate the whole thing into the function

function parentWithId(elem, id, fn) {
   while (elem = elem.parentNode && elem !== document.body) {
       if (elem.id === id) {
           if (fn) {
               fn(elem);
           }
           return elem;
       }
   }
   return null;
}


parentWithId(element, "target", doThis);

answered Jan 11 '15 at 00:26

jfriend00

683,504
96
985
979

I'm accepting this answer because it seems to work. Although I'm going to stick with the method of just using `.parentElement` due to not wanting to complicate my code any more than i have to. I wish there was a built in javascript function for this! – Jan 11 '15 at 00:54
@carb0nshel1 Even if there was a native solution, it would be used / look nearly the same as jfriend00's. Outsourcing the loop into an own function is definitely a more error-safe and readable way to write your Code instead of manually writing the loop on multiple places in your Code, so i don't see why it would complicate your Code? – Wortex17 Jan 11 '15 at 00:58

Alternative to .parentElement?

1 Answers1