The DOM parentElement property is used to returns the parent element of a particular child element. It is a read-only property. The parentElement and parentNode property are similar and the only difference is the parentElement property returns null if the parent node is not an element.
Syntax:
node.parentElement
Return Value: It returns a string which represents the parent node of any child node or it returns a null if the specified node does not contain any parent node.
Example 1:
<!DOCTYPE html><html> <head> <title> HTML DOM parentElement Property </title> </head> <body> <h1 style = "color:green;"> GeeksForGeeks </h1> <h2>DOM parentElement Property</h2> <ol type = "1"> <li id = "GFG">Quick Sort</li> <li>Merge Sort</li> <li>Selection Sort</li> <li>Heap Sort</li> </ol> <button onclick="Geeks()"> Submit </button> <p id="sudo"></p> <!-- script to find parentElement --> <script> function Geeks() { var w = document.getElementById("GFG").parentElement.nodeName; document.getElementById("sudo").innerHTML = w; } </script> </body></html> |
Output:
Before click on the button:
After click on the button:
Example 2: This example hide the parent element to click on the close icon.
<!DOCTYPE html><html> <head> <title> HTML DOM parentElement Property </title> <!-- CSS property to create box--> <style> div { padding: 16px; width: 70%; background-color: green; color: white; border-radius:30px; } .GFG { float: right; font-size: 30px; font-weight: bold; cursor: pointer; } </style> </head> <body> <center> <h2>DOM parentElement Property</h2> <div> <span class = "GFG" onclick = "this.parentElement.style.display = 'none';"> × </span> <p style="font-size:30px;">GeeksforGeeks.</p> </div> </center> </body></html> |
output:
Before click on the cross icon:
After click on the cross icon:
Supported Browsers: The browser supported by DOM parentElement property are listed below:
- Google Chrome 1.0
- Internet Explorer
- Firefox 9.0
- Opera
- Safari
