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 =     </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 =     </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> |
Output:
- Before clicking on the button:Â
Â
- After clicking on the button:
