jQuery unwrap()

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

jQuery unwrap()

The jQuery unwrap() method is used to remove the parent element of the selected elements.

Syntax:

  1. $(selector).unwrap()   

Example of jQuery unwrap() method

Let's take an example to demonstrate the jQuery unwrap() method.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  5. <script>  
  6. $(document).ready(function(){  
  7.     $("button").click(function(){  
  8.         $("p").unwrap();  
  9.     });  
  10. });  
  11. </script>  
  12. <style>  
  13. div{background-color: orange;}  
  14. article{background-color: yellowgreen;}  
  15. </style>  
  16. </head>  
  17. <body>  
  18. <div>  
  19. <p>Hello Guys!</p>  
  20. </div>  
  21. <article>  
  22. <p>This is javatpoint.com</p>  
  23. </article>  
  24. <button>Click here to remove the parent element of each p element</button>  
  25. </body>  
  26. </html>  

Test it Now

jQuery unwrap() example 2

Let's take an example which shows wrap() and unwrap() method together.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  5. <script>  
  6. $(document).ready(function(){  
  7.     $("#btn1").click(function(){  
  8.         $("p").wrap("<div></div>");  
  9.     });  
  10.     $("#btn2").click(function(){  
  11.         $("p").unwrap();  
  12.     });  
  13. });  
  14. </script>  
  15. <style>  
  16. div{background-color: pink;}  
  17. </style>  
  18. </head>  
  19. <body>  
  20. <p>Hello Guys!</p>  
  21. <p>This is javatpoint.com</p>  
  22. <button id="btn1">Wrap a div element around each p element</button>  
  23. <button id="btn2">Unwrap</button>  
  24. </body>  
  25. </html>  

Test it Now