Get the ID of a Parent element on Click using JavaScript

# Get the ID of a Parent element on Click using JavaScript

To get the id of the parent element on click:

Add a click event listener to the element.
Use the event.target property to get the element the user clicked on.
Use the parentElement property to get the parent and access its id property.

Here is the HTML for the examples.

index.html

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

  <body>
    <div id="parent">
      <p
        id="child"
        style="
          background-color: salmon;
          width: 100px;
          height: 100px;
        "
      >
        Child 1
      </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 child = document.getElementById('child');

child.addEventListener('click', function handleClick(event) {
  // 👇️ "parent"
  console.log(event.target.parentElement.id);
});

get id of parent element on click

The code for this article is available on GitHub

If you load the page and click on the child element, you will see the string parent logged to the console.

We added a click event listener to the child element.

Every time the element is clicked, the handleClick function is invoked.

We used the target property on the event object to access the parent element.

The target property is a reference to the object (element) on which the event was dispatched.

In other words event.target gives us access to the DOM element the user clicked.

You can console.log the target property to see which DOM element was clicked by the user.

index.js

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

child.addEventListener('click', function handleClick(event) {
  console.log(event.target); // 👉️ p#child

  // 👇️ "parent"
  console.log(event.target.parentElement.id);
});

get access to clicked element

The target property on the event object is useful when you need a generic way to access the element the event was dispatched on.

For example, if you add a click event listener on the document object, there is no good way to tell on which element the user clicked, other than event.target.

# Accessing parentElement on a specific child

If you want to get the id of the parent element of a specific child, you can also access parentElement.id directly on the child element.

index.js

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

child.addEventListener('click', function handleClick(event) {
  // 👇️ "parent"
  console.log(child.parentElement.id);
});

get id of direct parent element on click

The code for this article is available on GitHub

This example logs the id of the direct parent of the element with id set to child.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

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.

Get the ID of a Parent element on Click using JavaScript