Find if child element of parent element exists

Question

I've searched for a while now, and thought if for nothing else, to document this case here for future users.

How do I find out if a certain element contains a certain child element in the DOM using plain javascript? I have in my app an element with class 'react-tab'. It will become hidden, and no longer 'react-tab' but 'react-tab hidden' when the tab is in the background.

I want to check if the active class 'react-tab' div contains a div with id="drawingDiv".

so something like:

if(document.getElementsByClass("react-tab").contains("drawingDiv"))

or

if(document.getElementsByClass("react-tab").childNodes.contains("drawingDiv"))

I have yet to get the right answer, I do not want to use jQuery.

As in immediate children?

Andrew Li
– Andrew Li

2017-06-30 01:33:36 +00:00
Commented Jun 30, 2017 at 1:33 — Andrew Li
– Andrew Li, Commented Jun 30, 2017 at 1:33
yes, an immediate child.

Brian Stallter
– Brian Stallter

2017-06-30 01:33:54 +00:00
Commented Jun 30, 2017 at 1:33 — Brian Stallter
– Brian Stallter, Commented Jun 30, 2017 at 1:33

erikvold · Accepted Answer · 2017-06-30 01:48:15Z

7

Sounds like you could use document.querySelector for this.

var exists = !!document.querySelector(".react-tab:not(.hidden) > #drawingDiv");

edited Jun 30, 2017 at 1:48

answered Jun 30, 2017 at 1:37

erikvold

16.7k11 gold badges58 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brian Stallter Over a year ago

Almost, it works, but when the class changes to .react-tab hidden it still "exists"

erikvold Over a year ago

oh maybe try var exists = !!document.querySelector(".react-tab:not(.hidden) > #drawingDiv");

Brian Stallter Over a year ago

AWESOME!. You're the man. The next guy may have a nice googleable answer. I need to look into the querySelector logic.

RobG Over a year ago

@erikvold—you should add that comment to the answer, as it's actually the answer. ;-)

Collectives™ on Stack Overflow

Find if child element of parent element exists

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related