JavaScript parentElement
last modified April 2, 2025
In this article, we explore the parentElement property in
JavaScript. This property is essential for DOM traversal, allowing developers
to access the parent element of any DOM node.
Basic Definition
The parentElement property returns the parent element of the
specified element. If the element has no parent, or if the parent is not
an element node, it returns null.
This property is read-only and provides a convenient way to navigate upwards
in the DOM tree. It differs from parentNode as it only returns
element nodes.
Basic parentElement Usage
This example demonstrates how to access the parent element of a simple div.
<!DOCTYPE html>
<html>
<head>
<title>Basic parentElement</title>
</head>
<body>
<div id="parent">
<p id="child">Child element</p>
</div>
<script>
const child = document.getElementById('child');
const parent = child.parentElement;
console.log(parent.id); // Outputs: "parent"
</script>
</body>
</html>
In this basic example, we have a paragraph element nested inside a div. The
JavaScript code retrieves the child element, then accesses its parent using
parentElement.
This demonstrates the fundamental usage of parentElement to navigate
up the DOM tree. The property returns the immediate parent element of the
selected node.
Checking for Parent Existence
This example shows how to safely check if an element has a parent element.
<!DOCTYPE html>
<html>
<head>
<title>Parent Existence Check</title>
</head>
<body>
<div id="container">
<button id="btn">Check Parent</button>
</div>
<script>
const btn = document.getElementById('btn');
if (btn.parentElement) {
console.log('Parent exists:', btn.parentElement.id);
} else {
console.log('No parent element');
}
</script>
</body>
</html>
Here we check if the button element has a parent before trying to access it. This is a good practice to avoid errors when working with dynamically created elements.
The parentElement property will be null if the element
has no parent or if the parent is not an element node (like document).
Modifying Parent Element Style
This example demonstrates how to change the style of a parent element.
<!DOCTYPE html>
<html>
<head>
<title>Parent Style Modification</title>
<style>
#parentBox {
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="parentBox">
<p id="childText">Click me to change my parent's style</p>
</div>
<script>
const child = document.getElementById('childText');
child.addEventListener('click', function() {
const parent = child.parentElement;
parent.style.backgroundColor = 'lightblue';
parent.style.padding = '30px';
});
</script>
</body>
</html>
In this example, clicking the paragraph element changes its parent's style.
We use parentElement to access the parent div and modify its CSS.
This shows how parentElement can be used in event handlers to
dynamically modify ancestor elements. The style changes are applied to the
immediate parent of the clicked element.
Removing a Child from Its Parent
This example shows how to remove an element from its parent using parentElement.
<!DOCTYPE html>
<html>
<head>
<title>Remove Child from Parent</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li id="removeMe">Item 2</li>
<li>Item 3</li>
</ul>
<button onclick="removeItem()">Remove Item 2</button>
<script>
function removeItem() {
const item = document.getElementById('removeMe');
item.parentElement.removeChild(item);
}
</script>
</body>
</html>
Here we have a list with three items. The button click handler removes the
second item by accessing its parent and calling removeChild.
This demonstrates a common pattern where parentElement is used to
get a reference to the parent needed to remove a child element from the DOM.
Traversing Multiple Levels Up
This example shows how to traverse multiple levels up the DOM tree.
<!DOCTYPE html>
<html>
<head>
<title>Multi-level Traversal</title>
</head>
<body>
<div id="grandparent">
<div id="parent">
<div id="child">
<button id="btn">Find Grandparent</button>
</div>
</div>
</div>
<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', function() {
const grandparent = btn.parentElement.parentElement;
console.log('Grandparent ID:', grandparent.id);
grandparent.style.border = '2px solid red';
});
</script>
</body>
</html>
In this example, clicking the button accesses the grandparent element by
chaining two parentElement calls. It then logs the grandparent's
ID and adds a border to it.
This demonstrates how multiple parentElement calls can traverse
up multiple levels in the DOM tree. Each call moves up one level in the
hierarchy.
Source
MDN parentElement Documentation
In this article, we have shown how to use the parentElement
property in JavaScript. This property is fundamental for DOM traversal and
element manipulation in web development.
Author
List all JS DOM tutorials.