最后兩個(gè)按鈕的功能沒(méi)法實(shí)現(xiàn)，求大神幫我看看！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>unwrap刪除包裹器</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
.parent{
width: 1300px;
height: 300px;
border: 1px solid red;
margin: 50px auto 0;
text-align: center;
display: flex;
justify-content: space-around;
align-items: center;
}
.parent div{
border:1px solid red;
color: green;
}
.right-Txt{
border:1px solid red;
color: white;
background-color: black;
}
.btn{
width: 500px;
height: 80px;
margin: 50px auto 0;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
</head>
<body>
<div>
<p id="Txt1">hello,world!</p>
<p id="Txt2">hello,kitty!</p>
</div>
<div>
<input type="button" value="用方法1包裹" id="btn1">
<input type="button" value="用方法2包裹" id="btn2">
<input type="button" value="用方法1刪除包裹" id="btn3">
<input type="button" value="用方法2刪除包裹" id="btn4">
</div>
<script>
$('#btn1').on('click',function () {
/* body... */
$('#Txt1').wrap('<div></div>');?
?
})
</script>
<script>
$('#btn2').on('click',function () {
/* body... */?
$('#Txt2').wrap(function () {
/* body... */
return '<div></div>' ;
})
})
</script>
<script>
$('#btn3').on('click',function () {
/* body... */
$('#Txt1').unwrap('<div></div>');?
?
})
</script>
<script>
$('#btn4').on('click',function () {
/* body... */?
$('#Txt2').unwrap(function () {
/* body... */
return '<'<div></div>'>' ;
})
})
</script>
</body>
</html>
2016-09-07
最后兩個(gè)<script></script>塊，修改成下面的就可以用了
<script>
? ? $('#btn3').on('click',function () {
? ? ? ? /* body... */
? ? ? ? $('#Txt1').unwrap();
? ? })
</script>
<script>
? ? $('#btn4').on('click',function () {
? ? ? ? ? ? /* body... */?
? ? ? ? ? ? $('#Txt2').unwrap(function () {
? ? ? ? ? ? /* body... */
? ? ? ? ? ? return '<div></div>';
? ? ? ? })
? ? })
</script>