jQuery Tutorial

jQuery DOM - unwrap method

unwrap method

unwrap() method is used to remove the parent HTML elements around each html element in the set of matched html elements.

.unwrap()

Remove HTML Elements Around Matching Elements

<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

jQuery1

jQuery2

jQuery3

Toggle Wrap And Unwrap Around HTML Element

<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:

jQuery1

jQuery3

When wrap 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="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:

jQuery1

jQuery2

jQuery3

« Previous Next »

jQuery Programming Examples