As given in the jQuery API documentation, the .unwrap() method removes the element's parent. The matched elements (and their siblings, if any) replace their parents within the DOM structure.
Here’s an example:
<html>
<head>
<title>Exploring the unwrap method</title>
<style type="text/css">
.divOne{
height:40px;
width:100px;
background-color:#808080;
}
.divTwo{
height:20px;
width:50px;
background-color:#f0f0f0;
}
</style>
<script language="javascript" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script language="javascript" type="text/javascript">
$(function() {
$("#btn").click(function() {
jQuery('.divTwo').unwrap();
});
});
</script>
</head>
<body>
<form>
<div class="divOne">
<div class="divTwo">
</div>
</div>
<input id="btn" type="button" value="Unwrap" />
</form>
</body>
</html>
If you run the code, the display is similar to the following:
Clicking on Unwrap, calls the unwrap() method on the jQuery object representing divTwo. The output is as follows:
As shown above, unwrap removes the parent of divTwo.
See a Live Demo
Tweet
About The Author
No comments:
Post a Comment