'Get id of child elements

I need to get the id from all the child elements, which are in the parent class = "demo", but if the parent class = "demo" has id = "simone" I don't need to get the child id. How to achieve this?

If is simone, don't get children's id, else get children's id?

       var name;
     var divsname = document.querySelectorAll('.demo *');
     divsname.forEach(function(div){
        
        if (div.hasAttribute("id")) {
        name += "Name: "+div.getAttribute("id")+", "; 
        }else{
            
        }
        document.getElementById("get-demo").innerHTML = name;
    console.log(name);
     });
<div id="maja" class="demo"><div id="maja-child"></div></div>
<div id="alex" class="demo"><div id="alex-child"></div></div>
<div id="simone" class="demo"><div id="simone-child"></div></div>
<div id="pit" class="demo"><div id="pit-child"></div></div>

<div id="get-demo"></div>
javascriptfor-loopforeachgetparent-child


Solution 1:[1]

welcome to stackoverflow borma ;)

just use parentElement.getAttribute("id"),

ParentElement() will retrun parent of child element you can use exeption

div.parentElement.getAttribute("id") !== "simone"

will return false if id is simone.

Example

if (div.hasAttribute("id") && div.parentElement.getAttribute("id") !== "simone") {
      name += "Name: "+div.getAttribute("id")+", "; 
}

This full script

window.onload = () => 
{
var name = '', divsname = document.querySelectorAll('.demo *');

 divsname.forEach(function(div){
    if (div.hasAttribute("id") && div.parentElement.getAttribute("id") !== "simone") {
      name += "Name: "+div.getAttribute("id")+", "; 
    } 
    document.getElementById("get-demo").innerHTML = name;
 });
}

Solution 2:[2]

You can use the css :not selector and exclude the id simone.

       var name;
     var divsname = document.querySelectorAll('.demo:not(#simone) *');
     divsname.forEach(function(div){
        
        if (div.hasAttribute("id")) {
        name += "Name: "+div.getAttribute("id")+", "; 
        }else{
            
        }
        document.getElementById("get-demo").innerHTML = name;
    console.log(name);
     });
<div id="maja" class="demo"><div id="maja-child"></div></div>
<div id="alex" class="demo"><div id="alex-child"></div></div>
<div id="simone" class="demo"><div id="simone-child"></div></div>
<div id="pit" class="demo"><div id="pit-child"></div></div>

<div id="get-demo"></div>

Solution 3:[3]

You can use @jkoch answer or if you need to do something with any div with id 'simone' you can filter it within the forEach callback function. The name variable I set to a blank "" to avoid getting 'result' in the name variable.

var name = ""
     var divsname = document.querySelectorAll('.demo');
     divsname.forEach(function(div){
        
        if (div.id !== 'simone') {
        name += "Name: "+div.id+", "; 
        }else{
            //code if you want to do something with simone id
        }
        document.getElementById("get-demo").innerHTML = name;
            console.log(name);
     });

Solution 4:[4]

This should work.

document.querySelectorAll(".demo").forEach((item) => {
  if (item.id !== "simone") {
    console.log(item.firstChild.id);
  }
});
    <div id="maja" class="demo"><div id="maja-child"></div></div>
    <div id="alex" class="demo"><div id="alex-child"></div></div>
    <div id="simone" class="demo"><div id="simone-child"></div></div>
    <div id="pit" class="demo"><div id="pit-child"></div></div>

    <div id="get-demo"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 il_leandra
Solution 2 jkoch
Solution 3 sychordCoder
Solution 4 OndrejHj04

Related Questions