Cheap VPS & Xen Server


Residential Proxy Network - Hourly & Monthly Packages

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 Kreationnext.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 Kreationnext.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>

Comments

comments