DOM包裹unwrap()方法
我們可以通過(guò)wrap方法給選中元素增加一個(gè)包裹的父元素。相反,如果刪除選中元素的父元素要如何處理 ?
jQuery提供了一個(gè)unwrap()方法 ,作用與wrap方法是相反的。將匹配元素集合的父級(jí)元素刪除,保留自身(和兄弟元素,如果存在)在原來(lái)的位置。
看一段簡(jiǎn)單案例:
我要?jiǎng)h除這段代碼中的div,一般常規(guī)的方法會(huì)直接通過(guò)remove或者empty方法
但是如果我還要保留內(nèi)部元素p,這樣就意味著需要多做很多處理,步驟相對(duì)要麻煩很多,為了更便捷,jQuery提供了unwrap方法很方便的處理了這個(gè)問(wèn)題
找到p元素,然后調(diào)用unwrap方法,這樣只會(huì)刪除父輩div元素了
結(jié)果:
這個(gè)方法比較簡(jiǎn)單,也不接受任何參數(shù),注意參考下案例的使用即可
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://idcbgp.cn/static/lib/jquery/1.9.1/jquery.js"></script>
<style>
.left,
.right {
width: 250px;
height: 120px;
}
.left div,
.right div {
width: 100px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #bbffaa;
}
.right div {
background: yellow;
}
p {
border: 1px solid red;
}
a {
border: 1px solid blue;
}
</style>
</head>
<body>
<h2>DOM包裹unwrap()方法</h2>
<div class="left">
<div class="aaron1">點(diǎn)擊,通過(guò)unwrap方法給p元素刪除父容器div</div>
<div class="aaron2">點(diǎn)擊,通過(guò)unwrap的回調(diào)方法給a元素刪除父容器div</div>
</div>
<div class="right">
<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>
</div>
<div class="left">
<div>
<a>a元素</a>
</div>
<div>
<a>a元素</a>
</div>
</div>
<script type="text/javascript">
$(".aaron1").on('click', function() {
//找到所有p元素,刪除父容器div
$('p').unwrap('<div></div>')
})
</script>
<script type="text/javascript">
$(".aaron2").on('click', function() {
//找到所有p元素,刪除父容器div
$('a').unwrap(function() {
return '<div></div>';
})
})
</script>
</body>
</html>
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求