<!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>
最后两个<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>