Skip to content
Related Articles

Related Articles

HTML | DOM parentElement Property

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Aug, 2022

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: 

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() {
            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. 

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: 

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!