jQuery API の unwrap() は、マッチした要素の親要素を削除するメソッド。マッチした要素自体は残し、親要素だけを削除する。
記述方法
jQuery( セレクター ) . unwrap();
「セレクター」に指定した要素の親要素を削除。
記述例
jQuery( '#jquery-sample' ) . unwrap();
idが「jquery-sample」の要素の親要素を削除。
実装例（サンプル）
実装例（サンプル）の動作について
「wrap/unwrap」ボタンをクリックすると、背景色が黄色のdiv要素を、背景色が赤色のdiv要素で包み込む。
「wrap/unwrap」ボタンを再度クリックすると、背景色が赤色のdiv要素を取り除く。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function () {
jQuery( '#jquery-sample' ) . wrap( '<div id="jquery-sample-wrap"></div>' );
},
function () {
jQuery( '#jquery-sample' ) . unwrap();
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function () {
jQuery( '#jquery-sample' ) . wrap( '<div id="jquery-sample-wrap"></div>' );
},
function () {
jQuery( '#jquery-sample' ) . unwrap();
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
margin: 10px;
height: 100px;
background-color: yellow;
border-radius: 10px;
}
#jquery-sample-wrap {
margin: 10px;
background-color: red;
border: 1px solid darkred;
border-radius: 18px;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px;
height: 100px;
background-color: yellow;
border-radius: 10px;
}
#jquery-sample-wrap {
margin: 10px;
background-color: red;
border: 1px solid darkred;
border-radius: 18px;
}
-->
</style>
HTML
<button id="jquery-sample-button">wrap/unwrap</button>
<div id="jquery-sample"></div>
<div id="jquery-sample"></div>