WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
SPONSORED LINKS
Advertisements

How to remove wrapper element but keep the text content intact using jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery unwrap() method

Sometime you might require to remove the wrapper or parent element, a typical example is removing the anchor tag around the text. With jQuery unwrap() method you can easily remove the wrapper element and keep the inner HTML or text content intact.

Let's check out an example to understand how this method basically works:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery Remove Wrapper Element</title>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script>
  •     $(document).ready(function(){
  •         $("button").click(function(){
  •             $("p").find("a.link").contents().unwrap();
  •         });
  •     });
  • </script>
  • </head>
  • <body>
  •     <p>If you click the following button it will remove the anchor tag from <a href="#" class="link">this link</a> but keep the text content intact.</p>
  •     <button type="button">Remove Link</button>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.