how can i detect if a parent element has a specific child element with javascript?

Question

I have a div that has a "span" and I am dynamically adding "div" tags with a class to identify them, so my question is: how can I know if my parent "div" tag has new div tag children without counting the tag "span"? because my problem is that the e[i].children.length function is always considering the span title as a child

In summary I need to know how many child div tags the parent div has (excluding all other html tags that can be added)

let e = document.getElementsByClassName('classDiv') for (let i = 0; i < e.length; i++) { if (e[i].children.length > 0) { console.log("has children"); } else { console.log("has no children"); } }

<div id="parent" class="classDiv"> <span id="title">title</span> <div>children1</div> <div>children2</div> <div>children3</div> </div>

Are you running a DOM parser in Node? If not, then why is it tagged node? — mplungjan
– mplungjan, Commented Aug 14, 2022 at 19:13

Pantalaimon · Accepted Answer · 2022-08-14 19:06:53Z

Try

var e = document.querySelectorAll('#parent > div'); console.log(e.length ? "has children" : "has no children");

The > selector is used to select elements with a specific parent

Shai · Accepted Answer · 2022-08-15 04:23:23Z

document.getElementById("parent").getElementsByTagName("div")

Will return all the child elements that are divs.

You can also do the same with getElementsByClassName instead of getElementById, while iterating over the results, and using the same getElementsByTageName on each one.

This will also return nested divs within the children itself, which may lead to unwanted results.

Collectives™ on Stack Overflow

how can i detect if a parent element has a specific child element with javascript?

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related