Get Parent Element from Child – Javascript, jQuery

Get Parent Element from Child using Javascript or jQuery

There might be a situation where you need to access the parent element of a particular child element in your web application. In this article, we will discuss several ways to get the parent element from a child element using Javascript and jQuery.

Get Parent Id from Child Element

Using Javascript

Use parentNode or parentElement Property to get Parent element using javascript.

1. parentNode Property:

JavaScript provides a straightforward way to access the parent element through the parentNode property of the DOM node.

const childElement = document.getElementById('childId');
const parentElement = childId.parentNode;

2. parentElement Property (for modern browsers):

Modern browsers also support the parentElement property, which is similar to parentNode.

const childElement = document.getElementById('childId');
const parentElement = childId.parentElement;

Example:

.html file

<html>
<head>
<script>
	document.addEventListener("DOMContentLoaded", () => {
		const child = document.getElementById('childEle');

		child.addEventListener('click', function childEleClick(event) {
			// 👇️ "parent"
			console.log('child.parentElement.id = ' + child.parentElement.id);
			console.log('child.parentNode.id = ' + child.parentNode.id);
		});
	});
</script>
</head>

<body>
	<div id="parentEle">
		<div id="childEle">
			Click me to get Parent element Id.
		</div>
	</div>

</body>
</html>

output screenshot

Using jQuery

In the same way, use the parent() or closest() method in jQuery to get the parent element.

1. parent() Method:

The parent() method retrieves the direct parent element of the selected child element.

const parentElement = $('#childElementId').parent();

2. closest() Method:

If the parent element isn’t directly above the child, you can use the closest() method to find the nearest element that matches a specific selector.

const parentElement = $('#childElementId').closest('.parentClass');

Other Ways to Get the Parent Element

If none of the solutions works out then you can try other tricks which are mentioned below:

1. Traversing Up the DOM Tree:

You can move up the DOM tree yourself by using methods like parentNode or parentElement over and over again until you get to the parent element you want.

let parentElement = childElement.parentNode;
while (parentElement !== null) {
    if (parentElement.matches('.parentClass')) {
        break;
    }
    parentElement = parentElement.parentNode;
}

2. Using Event Delegation:

When working with event handling, especially in content that’s created dynamically, you can use event delegation to reach the parent element directly through the event object.

document.addEventListener('click', function(event) {
    const parentElement = event.target.closest('.parentClass');
    // Perform actions with parentElement
});