How to remove parent element except its child element using jQuery ?

0 0 1 minute read

Given an HTML document and the task is to remove the parent element except for its child element.

Approach 1:

Use contents() method to select all the direct children, including text and comment nodes for the selected element.
Selected elements are stored in a variable.
Now, use replaceWith() method to replace the content of parent element by its all child element which is stored into a variable.

Example: This example uses contents() and replaceWith() method to remove the parent element except for its child element.

<!DOCTYPE HTML>  
<html>  
  
<head>  
    <title>  
        Remove the parent element not 
        its child using jQuery 
    </title> 
      
    <script src =  
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
    </script> 
</head> 
  
<body style = "text-align:center;">  
    <h1 style = "color:green;" id = "h1">  
        GeeksForGeeks  
    </h1> 
      
    <div id = "parent" style = "border: 1px solid black;"> 
          
        <p id = "GFG_UP" style =  
            "font-size: 15px; font-weight: bold;"> 
        </p> 
          
        <button onclick = "GFG_Fun()"> 
            click here 
        </button> 
          
        <p id = "GFG_DOWN" style = 
            "color:green; font-size: 20px; font-weight: bold;"> 
        </p> 
          
    </div> 
      
    <script>  
        var up = document.getElementById('GFG_UP'); 
        up.innerHTML = "This content is inside a big DIV."; 
        var down = document.getElementById('GFG_DOWN'); 
          
        down.innerHTML = "Click on the button to remove " 
                        + "just this parent DIV"; 
          
        var heading = document.getElementById('h1'); 
          
        function GFG_Fun() { 
            var content = $("#parent").contents(); 
            $("#parent").replaceWith(content); 
        } 
    </script>  
</body>  
  
</html> 

Output:

Before clicking on the button:

After clicking on the button:

Approach 2: This approach uses unwrap() method to remove the parent element from the selected element.
Example:

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        Remove the parent element not 
        its child using jQuery 
    </title> 
  
    <script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 
    </script> 
</head> 
  
<body style = "text-align:center;"> 
  
    <h1 style = "color:green;" id = "h1"> 
        GeeksForGeeks 
    </h1> 
  
    <div id = "parent" style = "border: 1px solid black;"> 
  
        <p id = "GFG_UP" style = 
            "font-size: 15px; font-weight: bold;"> 
            This content is inside a big DIV. 
        </p> 
  
        <button onclick = "GFG_Fun()"> 
            click here 
        </button> 
  
        <p id = "GFG_DOWN" style = 
            "color:green; font-size: 20px; font-weight: bold;"> 
            Click on the button to remove just this parent DIV 
        </p> 
    </div> 
  
    <script> 
        function GFG_Fun() { 
            $("#parent").contents().unwrap(); 
        } 
    </script> 
</body> 
  
</html>