Is there a way to get child's parent name using JavaScript?

Question

so, I'm literally new to JavaScript, I've been reading and searching about it in here and other places.

This may be super easy, but I'm stuck and I don't know how to get it done.

Here is the deal. I'm trying to get the parent's name through the child id/class/tag. I'll demonstrate.

<li class="example">example</li>
  <ul id="what i want">what i want</ul>
    <li id="something here">something here</li>
      <img class="element i'm using">element im using</img>

So, I can get, through document.getElementById, the "element i'm using". I want to get the "what i want". I can't really use the same thing because that element has some random numbers that I can't predict.

My plan is to use "element i'm using" to get "what i want" and apply a rule.

I'm a literally beginner, if it's someting basic I'm sorry, but I couldn't find a solution yet.

I hope you guys can help me.

Thanks, have a good day.

--- Edit/Update ---

Hey, I quick update.

I've found a way to do what I want. I'll explain better, but I'm struggling again.

Here we go:

<li class="bp-body">
 <ul id="random-number-1">
  <li class="voice">
   <img class="100-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul class="random-number-2">
  <li id="voice">
   <img class="101-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul id="random-number-3">
  <li class="voice">
   <img class="102-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul id="random-number-4">
  <li class="voice">
   <img class="100-photo">(photo)</img>
  </li>
 </ul>
</li>

So, my original problem was that I was trying to get the <ul id="random-number-1"> through the <img class="100-photo">. And I've done that. I used a function to return the document.querySelector("100-photo") parent, which is <li class="voice">, and to get the node I wanted I ran the function with .parent, and it returned the <ul id="random-number-1"> so I could set a property. It worked fine, but I've found another problem: this solution only returns the first <ul> that contains the <img class="100-photo"> on node tree, but in the reality the <li class="bp-body"> may have others <ul id="random-number-xxxx">.

Here is the function that I used:

function findParent() { 
 return document.querySelector("100-photo").parentNode;
}
findParent().parentNode.style.setProperty('background', '#fff');

The element <ul id="random-number-1"> got a nice white background, but the other elements with the same <img class="100-photo"> stayed the same. I tried to find a workaround.

I tried the querySelectorAll first to find all the elements, I used console.log to see if it works.

function getParents() {
 return document.querySelectorAll("100-photo");
}

It returned in the console: NodeList [ img.100-photo , img.100-photo ]

Great, that's a start. But when I tried to do the same trick, it didn't work.

function getParents() {
 return document.querySelectorAll("100-photo").parentNode;
}

The console only shows: undefined.

I thought that with a loop it may work with the solution, but I'm not with it familiar yet. I tried to workaround something to at least get a NodeList with <li class="voice"> which contains the <img class="100-photo"> but I got nothing yet.

My objective is to identify every <img class="100-photo"> to get the respective <li> parent to get the <ul id="random-number-xxxx"> to set a property.

I hope you guys can help me.

Thanks, have a nice day.

Possible duplicate of [how i get parent id by onclick Child in js ](https://stackoverflow.com/questions/42213858/how-i-get-parent-id-by-onclick-child-in-js) — Selaka Nanayakkara, Dec 05 '19 at 07:58
@CertainPerformance yeah, theres others elements before that. I used this piece to demonstrate what I'm trying to get. — caulifla, Dec 06 '19 at 07:38

yogZ · Answer 1 · 2019-12-11T05:56:19.767

2

UPDATE:

As per your latest code update, the below should work.

Replace this code

function findParent() { return document.querySelector("100-photo").parentNode; } findParent().parentNode.style.setProperty('background', '#fff');

With the below code

var elements = document.getElementsByClassName("100-photo")
Array.prototype.forEach.call(elements, function(item) { 
 item.parentNode.parentNode.style.setProperty('background', '#00aae4'); 
});

<li class="bp-body">
 <ul id="random-number-1">
  <li class="voice">
   <img class="100-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul class="random-number-2">
  <li id="voice">
   <img class="101-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul id="random-number-3">
  <li class="voice">
   <img class="102-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul id="random-number-4">
  <li class="voice">
   <img class="100-photo">(photo)</img>
  </li>
 </ul>
</li>

==========================================================================

If you know the child elements ID and want to access the parent element, you can use the below:

document.getElementById("child_id").parentElement

Doc for parentElement

Example Below:

When you run the code snippet, you will see the parent div printed in the console below.

var parent = document.getElementById("child").parentElement
console.log(parent)

<div id="parent">
  <div id="child">I m a child of parent div </div>
</div>

edited Dec 11 '19 at 05:56

answered Dec 05 '19 at 07:58

yogZ

89
8

I tried to run, and the console returned this: "TypeError: document.getElementById(...) is null", between the () I put the actual value. I tried to change to "document.getElementsClassName" and got through without errors, but only displayed "undefined" (same with "document.getElementsByTagName"). – caulifla Dec 06 '19 at 07:44
Can you create a simple https://jsfiddle.net/ with what you have done so that it is easier to check and advise? – yogZ Dec 09 '19 at 07:34
I updated the first post with more information. @yogZ – caulifla Dec 10 '19 at 04:48
In your latest code sample, you are using querySelectorAll which returs a list/array and hence you need to loop into each one inside it. You can use forEach like below: document.querySelector("100-photo").forEach(function(item) { item.parentNode.parentNode.style.setProperty('background', '#fff'); }); – yogZ Dec 10 '19 at 12:02
Hum... Where do I put the code with forEach? I tried to put in the console and it returned `undefined`. – caulifla Dec 10 '19 at 23:30
I have updated my answer with a working copy as per your latest given code. – yogZ Dec 11 '19 at 05:56

score 0 · Answer 2 · answered Dec 05 '19 at 07:57

0

<div class="parent">
    <div class="child1">
        <div class="child2">
        </div>
    </div>
</div>

The children property returns an array of elements, like so:

parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]

There are alternatives to querySelector, like document.getElementsByClassName('parent')[0] if you so desire.

You could just use querySelectorAll to get decendents of parent having a class name of child1:

children = document.querySelectorAll('.parent .child1');

The difference between qS and qSA is that the latter returns all elements matching the selector, while the former only returns the first such element.

answered Dec 05 '19 at 07:57

user6250770

680
2
10
25

I see, huh. So, in the grandparent (is this the correct name?) that I want it is formed by a randomize number, I can't really predict what it would be to use in the function/script. I can only use the child, that it's not randomized. The plan is to use this child to get the grandparent id/class so I can set a property. – caulifla Dec 06 '19 at 07:52
Hey, I updated the first post with more information about the problem and such. @user6250770 – caulifla Dec 10 '19 at 04:49

Mohammad yasin · Answer 3 · 2019-12-10T18:31:35.207

0

UPDATE 2

According to your requirement below code will do the job.

function findParent(element) { 
  return element.parentNode;
}

var childrens = document.getElementsByClassName("100-photo");

Array.prototype.forEach.call(childrens, child => {
  findParent(child).parentNode.style.setProperty('background', 'yellow');
});

<li class="bp-body">
 <ul id="random-number-1">
  <li class="voice">
   <img class="100-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul class="random-number-2">
  <li id="voice">
   <img class="101-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul id="random-number-3">
  <li class="voice">
   <img class="102-photo">(photo)</img>
  </li>
 </ul>
 <div id="white-line"></div>
 <ul id="random-number-4">
  <li class="voice">
   <img class="100-photo">(photo)</img>
  </li>
 </ul>
</li>

alert(document.getElementById('element_use').closest('#element_want').id);

<li class="example">example</li>
    <ul id="element_want">what i want <!-- removed <ul> from here  -->
        <li id="something here"> <!-- removed <li> from here  -->
            Something here
            <img class="element_use" id="element_use">element im using</img>
        </li>
    </ul>
</li>

You can use closest to find out your desired parent element

document.getElementById("element_u _use").closest('.parent_u_need_class');

Updated Answer I Answered according to your HTML indentation, I've done some changes according to your indentation.

Closest function looks for the parents having matching value passed in parameter https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

edited Dec 10 '19 at 18:31

answered Dec 05 '19 at 08:03

Mohammad yasin

19
6

I tried this but I couldn't get through. Could you elaborate using the example? So I can understand how it would work. – caulifla Dec 06 '19 at 07:47
I tried to run using your answers, putting the actual value, but I kept getting "document.getElementById(...).closest is not a function" on the log. I tried to change the document.(...) to getElementsByClassName and got the same result. – caulifla Dec 06 '19 at 21:54
May be you have not given any ID to your child element. Can you show me the actual HTML you are using? – Mohammad yasin Dec 07 '19 at 09:07
@Mohhamad yasin I updated the first post with more information about it. – caulifla Dec 10 '19 at 04:48
So, I may be doing something wrong of missing something. I copied your code with the updated version, and when I ran it, I got the message `ReferenceError: element is not defined`. I tried to change things around to see what happens, but it didn't work. What am I missing? – caulifla Dec 10 '19 at 23:18
Firstly make sure you have more than 0 childrens in your children variable. Secondly you should pass child variable as findParent(child) function parameter. It should work if you have copied both HTML and JS code as well – Mohammad yasin Dec 11 '19 at 09:45

Is there a way to get child's parent name using JavaScript?

3 Answers3