HTML | DOM parentElement Property

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

My Personal Notes

Recommended Posts: