HTML METHODS - unwrap()

The unwrap() method in JQuery is used to remove the parent of the selected HTML element.

Say, we have one <p> element,

<p> First Para </p>

And have a <div> element around the <p> element. Something like the below one,

<div style = "background-color: violet">
	<p> First Para </p>
</div>

And we want to remove the <div> element around the <p> element.

And since, <div> is the parent of <p> element, we can use the unwrap() method to remove it.

Example :

<html>
    <head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<div style = "background-color: violet">
			<p> First Para </p>
		</div>
        
    	<button> Click Here to Unwrap </button>

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
            
            $('button').click( function() {
				$('p').unwrap();
			});
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have used the JQuery statement,

$('button').click( function() {
	$('p').unwrap();
});

To remove the <div> element that is around the <p> element,

<div style = "background-color: violet">
	<p> First Para </p>
</div>

And the,

$('p').unwrap();

Removes the parent (i.e. <div>) of the <p> element.

Now, if you see the output, the <div> element was of color violet. And on button click, when it got removed. The violet color also got vanished.

❮❮ PREV NEXT ❯❯