HTML DOM parentElement Property

Last Updated : 15 Jun, 2023

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>