Skip to main content

How to Get a Parent Element on Click in JavaScript

When a user interacts with an element on your page, you often need to find a specific parent or ancestor element to take action. For example, when a "delete" button is clicked inside a list item, you need to find the <li> element itself to remove it.

This guide will teach you the modern and standard methods for traversing up the DOM tree from a clicked element. You will learn how to use the simple parentElement property and the more powerful and flexible closest() method, which is the recommended best practice for event handling.

The Core Property: element.parentElement​

The parentElement property is the most direct way to get the immediate parent of any DOM element. It's a read-only property that returns the parent Element or null if the element has no parent.

This is a simple and effective example to move one level up the DOM tree.

<div id="parent-container">
  <p id="child-element">Hello, world!</p>
</div>
const child = document.getElementById('child-element');
const parent = child.parentElement;

console.log(parent.id); // Output: "parent-container"

parentElement vs. parentNode: A Quick Note​

You will also see the parentNode property. While they are often the same, there is a key difference:

  • parentElement: Always returns an HTMLElement or null.
  • parentNode: Can return any type of Node, including the document or document.shadowRoot, which are not elements.
note

For 99% of DOM manipulation, parentElement is what you want. It is more specific and predictable.

For interactive lists or components, adding a separate event listener to every single child element is inefficient. The best practice is event delegation: you place a single event listener on a parent container.

When an event happens, you can use event.target (the element that was actually clicked) and the closest() method to find the specific parent you're interested in.

The closest() Method​

The element.closest('selector') method is incredibly powerful. It starts at the element itself and traverses up the DOM tree until it finds the first ancestor that matches the provided CSS selector.

We have a list of items, and each one has a delete button. We want to know which list item's delete button was clicked.

<ul id="item-list">
  <li data-id="1">Item 1 <button class="delete-btn">X</button></li>
  <li data-id="2">Item 2 <button class="delete-btn">X</button></li>
  <li data-id="3">Item 3 <button class="delete-btn">X</button></li>
</ul>

Solution:

const list = document.getElementById('item-list');

// Add ONE listener to the parent list
list.addEventListener('click', (event) => {
  // Use closest() to see if a delete button was clicked
  const deleteButton = event.target.closest('.delete-btn');

  // If a delete button (or something inside it) was clicked...
  if (deleteButton) {
    // ...find the parent <li> element
    const listItem = event.target.closest('li');
    if (listItem) {
      console.log(`Delete button in list item with ID ${listItem.dataset.id} was clicked.`);
      // listItem.remove(); // You could then remove the item
    }
  }
});
note

This approach is highly performant and works automatically even if new list items are added to the DOM later.

A Simpler Use Case: A Direct Event Listener​

If you only have a single child element and don't need the power of event delegation, you can add a listener directly to it and use parentElement.

For example, when a specific child is clicked, we need to get its parent's ID.

<div id="parent">
  <button id="child-button">Click Me</button>
</div>

Solution:

const childButton = document.getElementById('child-button');

childButton.addEventListener('click', (event) => {
  // event.target will be the button itself
  const parent = event.target.parentElement;
  
  console.log('Parent ID:', parent.id); // Output: "parent"
});
note

While this works, the closest() method is often still a better choice as it is more resilient to changes in the HTML structure.

Conclusion​

Finding a parent element in response to a click is a fundamental DOM manipulation skill.

  • The element.parentElement property is the simplest way to get the direct parent of an element.
  • For handling events on lists of items, the event delegation pattern is the recommended best practice.
  • Within an event delegation handler, the event.target.closest('selector') method is the most powerful and flexible way to find the specific ancestor element you are looking for.

Table of Contents