How to remove parent element except its child element using jQuery ? Last Updated : 27 Oct, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. html <!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: html <!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> Output: Before clicking on the button: After clicking on the button: Comment More infoAdvertise with us Next Article How to filter the children of any element using jQuery ? P PranchalKatiyar Follow Improve Article Tags : JQuery jQuery-Misc Similar Reads How to remove contents of elements using jQuery ? In this article, we will discuss how to remove the contents of the elements using jQuery. To remove the contents of elements, we will use the empty() method and the remove() method. The jQuery empty() method is used to remove all child nodes and their content for the selected elements. This method d 3 min read How to select direct parent element of an element in jQuery ? In this article, we will select the direct parent element of an element using jQuery. To select the direct parent element, the parent() method is used. This method finds the parent element related to the selected element. This parent() method traverses a single level up the selected element and retu 1 min read How to remove all attributes of an HTML element using jQuery ? In this article, we will see how to remove all attributes of an HTML element using jQuery. To remove all attributes of elements, we use the removeAttributeNode() method and .removeAllAttributes(). Syntax: $.fn.removeAllAttributes = function() { return this.each(function() { $.each(this.attributes, f 1 min read How to filter the children of any element using jQuery ? In this article we will learn how to filter the children of any element in JQuery. JQuery is a fast and lightweight JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. It is widely famous for its motto o 3 min read How to iterate through child elements of a div using jQuery ? jQuery Selector can be used to find (select) HTML elements from the DOM. Once an element is selected, the jQuery children() method is called to find all the child elements of the selected element. To loop through the child elements, the jQuery each() method is used as demonstrated in the following e 3 min read How to remove options from select element using jQuery ? Removing options from a select element using jQuery means programmatically deleting specific or all <option> elements within a <select> dropdown. This can be done using jQuery methods like remove() or empty(), allowing dynamic updates of the dropdown's available choices based on conditio 3 min read Like