jQuery DOM操作unwrap()方法

我們可以透過wrap方法為選取元素增加一個包裹的父元素。相反，如果刪除選取元素的父元素要如何處理 ?

jQuery提供了一個unwarp()方法，作用與wrap方法是相反的。將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。

下面我們來寫一個實例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>
        <p>元素</p>
    </div>

    <script>
        $("p").unwrap("<div></div>");
    </script>
</body>
</html>

小夥伴們可以在本地運行，然後在瀏覽器中按F12進行調試，或者使用快捷鍵ctrl+shift+i ,大家可以看到我們先開始寫的div標籤就已經被刪除了

大家注意，我們之前刪除有remove 或者empty 方法，這個是會把其中的元素都給刪除，而unwrap方法是只刪除父節點，但不刪除子節點，這個方法比較簡單，大家參考上面的案例即可

新建檔案

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
	<div>
		<p>元素</p>
	</div>

	<script>
		$("p").unwrap("<div></div>");
	</script>
</body>
</html>

提交重置程式碼

自動運行

全螢幕