Open In App

HTML DOM parentElement Property

Improve
Improve
Like Article
Like
Save
Share
Report

The DOM parentElement property is used to return the parent element of a particular child element. It is a read-only property. The parentElement and parentNode properties 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 that 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: In this example, we will use parentElement property.

HTML




<!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() {
            let w =
                document.getElementById("GFG").parentElement.nodeName;
            document.getElementById("sudo").innerHTML = w;
        }
    </script>
</body>
 
</html>


Output: 

 

 Example 2: This example hides the parent element to click on the close icon. 

HTML




<!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: 

 

Supported Browsers: The browser supported by DOM parentElement property are listed below:

  • Google Chrome 1.0 and above
  • Edge 12 and above
  • Internet Explorer 8 and above
  • Firefox 9.0 and above
  • Opera 7 and above
  • Safari 1.1 and above


Last Updated : 15 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads