jQuery unwrap

—

by

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

Syntax:

$(selector).unwrap()

Example of jQuery unwrap() method

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

<!DOCTYPE html>  

<html>  

<head>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  

<script>  

$(document).ready(function(){  

    $("button").click(function(){  

        $("p").unwrap();  

    });  

});  

</script>  

<style>  

div{background-color: orange;}  

article{background-color: yellowgreen;}  

</style>  

</head>  

<body>  

<div>  

<p>Hello Guys!</p>  

</div>  

<article>  

<p>This is javatpoint.com</p>  

</article>  

<button>Click here to remove the parent element of each p element</button>  

</body>  

</html>

jQuery unwrap() example 2

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



<!DOCTYPE html>  



<html>  



<head>  



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  



<script>  



$(document).ready(function(){  



    $("#btn1").click(function(){  



        $("p").wrap("<div></div>");  



    });  



    $("#btn2").click(function(){  



        $("p").unwrap();  



    });  



});  



</script>  



<style>  



div{background-color: pink;}  



</style>  



</head>  



<body>  



<p>Hello Guys!</p>  



<p>This is javatpoint.com</p>  



<button id="btn1">Wrap a div element around each p element</button>  



<button id="btn2">Unwrap</button>  



</body>  



</html>

Comments

Leave a Reply Cancel reply