jQuery Tutorial
unwrap() method is used to remove the parent HTML elements around each html element in the set of matched html elements.
.unwrap()
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } .codingpointer { background: yellow; margin: 4px; font-size: 14px; } .wrapper { background: green; padding: 10px; margin:4px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $( ".codingpointer" ).unwrap(); }); </script> </head> <body> <p>Test Section</p> <div class="wrapper "> <div class="codingpointer">jQuery1</div> <div class="codingpointer">jQuery2</div> </div> <div class="codingpointer">jQuery3</div> </body> </html>HTML document structure is updated as below once unwrap method is executed.
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } .codingpointer { background: yellow; margin: 4px; font-size: 14px; } .wrapper { background: green; padding: 10px; margin:4px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $( ".codingpointer" ).unwrap(); }); </script> </head> <body> <p>Test Section</p> <div class="codingpointer">jQuery1</div> <div class="codingpointer">jQuery2</div> <div class="codingpointer">jQuery3</div> </body> </html>Output:
Test Section
jQuery1jQuery2jQuery3
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } .codingpointer { background: yellow; margin: 4px; font-size: 14px; } .wrapper { background: green; padding: 10px; margin:4px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $("a:first").bind("click", function(event){ var element = $(".codingpointer"); if ( element .parent().is( "div" ) ) { element.unwrap(); } else { element.wrap( "<div class='wrapper'></div>" ); } }); }); </script> </head> <body> <a href="#">toggle wrap</a> <div class="wrapper "> <div class="codingpointer">jQuery1</div> <div class="codingpointer">jQuery2</div> </div> <div class="codingpointer">jQuery3</div> </body> </html>When unwrap HTML document structure is as below,
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } .codingpointer { background: yellow; margin: 4px; font-size: 14px; } .wrapper { background: green; padding: 10px; margin:4px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $("a:first").bind("click", function(event){ var element = $(".codingpointer"); if ( element .parent().is( "div" ) ) { element.unwrap(); } else { element.wrap( "<div class='wrapper'></div>" ); } }); }); </script> </head> <body> <a href="#">toggle wrap</a> <div class="codingpointer">jQuery1</div> <div class="codingpointer">jQuery2</div> <div class="codingpointer">jQuery3</div> </body> </html>Output:
<html> <head> <title>The jQuery Example</title> <style> .wrapper { border: 2px solid blue; } .codingpointer { background: yellow; margin: 4px; font-size: 14px; } .wrapper { background: green; padding: 10px; margin:4px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ $("a:first").bind("click", function(event){ var element = $(".codingpointer"); if ( element .parent().is( "div" ) ) { element.unwrap(); } else { element.wrap( "<div class='wrapper'></div>" ); } }); }); </script> </head> <body> <a href="#">toggle wrap</a> <div class="wrapper "> <div class="codingpointer">jQuery1</div> </div> <div class="wrapper "> <div class="codingpointer">jQuery2</div> </div> <div class="wrapper "> <div class="codingpointer">jQuery3</div></div> </body> </html>Output:
jQuery Tutorial
Privacy Policy | Copyright2020 - All Rights Reserved. | Contact us
| Report website issues in Github
| Facebook page
| Google+ page