Check if Element has a Child with given ID or Class in JS

# Table of Contents

# Check if Element has a Child with a given ID

Use the querySelector() method to check if an element has a child with a specific id.

The querySelector method returns the first element that matches the provided selector or null if no element matches.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">
      <p>Child 1</p>
      <p>Child 2</p>
      <p id="child-3">Child 3</p>
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

if (box.querySelector('#child-3') !== null) {
  // 👇️ this runs
  console.log('✅ element has child with id of child-3');
} else {
  console.log('⛔️ element does NOT have child with id');
}

check if element has child with given id

The code for this article is available on GitHub

We used the getElementById method to select the parent element.

The querySelector() method can be scoped to a specific element and returns the first element that is a descendant of the element the method was called on and matches the provided selector.

If no element matches the provided selector, the querySelector method returns null.

In our if statement, we check if the returned value is not equal to null. If the element is found, the if block runs, otherwise, the else block runs.

# Selecting the child in a single statement using an ID

If you haven't selected the parent element yet, you can do this in a single step.

index.js

Copied!
if (document.querySelector('#box #child-3') !== null) {
  console.log('✅ element has child with id of child-3');
} else {
  console.log('⛔️ element does NOT have child with id');
}

selecting the child in a single statement using an id

The code for this article is available on GitHub

We used the querySelector method to select an element that has an id of child-3 that is a descendant of an element with an id of box.

The selector you pass to the querySelector method can be as specific as necessary.

The following example only checks if any of the element's direct children have the id.

index.js

Copied!
if (document.querySelector('#box > #child-3') !== null) {
  // 👇️ this runs
  console.log('✅ element has child with id of child-3');
} else {
  console.log('⛔️ element does NOT have child with id');
}

The selector above would not match any of the nested children of the element with id of box that have an id of child-3.

# Check if Element has a Child with a given Class

The same approach can be used to check if an element has a child with a given class.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">
      <p>Child 1</p>
      <p>Child 2</p>
      <p class="child-3">Child 3</p>
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

if (box.querySelector('.child-3') !== null) {
  console.log('✅ element has child with class of child-3');
} else {
  console.log('⛔️ element does NOT have child with class');
}

check if element has child with given class

The code for this article is available on GitHub

We prefixed the name of the class with a period . because that is the correct selector when selecting an element by class.

# Selecting the child in a single statement using a Class

If you haven't selected the parent element yet, you can do this in a single step.

index.js

Copied!
if (document.querySelector('#box .child-3') !== null) {
  // 👇️ this runs
  console.log('✅ element has child with id of child-3');
} else {
  console.log('⛔️ element does NOT have child with id');
}

The code for this article is available on GitHub

The code sample checks if an element has a child with a given class in a single statement.

You can also make the selector more specific by using an angle bracket >.

index.js

Copied!
if (document.querySelector('#box > .child-3') !== null) {
  // 👇️ this runs
  console.log('✅ element has child with id of child-3');
} else {
  console.log('⛔️ element does NOT have child with id');
}

The code sample checks if an element has a direct child with a given class.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Check if Element has a Child with given ID or Class in JS

# Table of Contents

# Check if Element has a Child with a given ID

# Selecting the child in a single statement using an ID

# Check if Element has a Child with a given Class

# Selecting the child in a single statement using a Class

Borislav Hadzhiev