DOM包裹unwrap()方法，jQuery基础(二)

第1章课程介绍
视频：1-1 jQuery基础(二)—DOM...(01:31)

DOM包裹unwrap()方法

我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反，如果删除选中元素的父元素要如何处理 ?

jQuery提供了一个unwrap()方法，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

看一段简单案例：

<div>
    <p>p元素</p>
</div>

我要删除这段代码中的div，一般常规的方法会直接通过remove或者empty方法

$('div').remove();

但是如果我还要保留内部元素p，这样就意味着需要多做很多处理，步骤相对要麻烦很多，为了更便捷，jQuery提供了unwrap方法很方便的处理了这个问题

$('p').unwrap();

找到p元素，然后调用unwrap方法，这样只会删除父辈div元素了

结果：

<p>p元素</p>

这个方法比较简单，也不接受任何参数，注意参考下案例的使用即可

任务

?不会了怎么办

index.html

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
代码

全部精华我要发布

导入本地JQ库删除父级容器没有反应

最新回答 / 秋之枫华

知道这个方法咋用就行啦，不必过分纠结

1 回答 928 浏览

2020-02-01

不知道p按钮咋错了。没有反应

已采纳回答 / kiraseo

可能是jq引用路径有问题

2 回答 1000 浏览

2022-08-09

.unwrap()的参数没起作用？

最新回答 / 悟酱起飞

左侧已经写过了：这个方法比较简单，也不接受任何参数，注意参考下案例的使用即可我猜测是例子复制了前面的wrap方法的代码，忘了删除参数了

4 回答 1517 浏览

2019-02-15

unwrap('</>'),在3.3.1.js版本中布恩那个实现

+ 我来回答回答最高可+2积分

2 回答 952 浏览

2022-09-08

我一直在想一个问题，对于wrap和unwrap？

最新回答 / 悟酱起飞

用方法直接就操作好了，一步到位直接在代码上增加或者减少包裹，怎么操作？那你是不是要重新定义代码，然后又append上去，然后删除原来的代码？

2 回答 1738 浏览

2019-02-15

回调过程问题

已采纳回答 / 小隆隆

unwrap生效前,执行function,再执行unwrap

1 回答 1102 浏览

2018-03-26

有点不明白为什么要有这些添加删除的方法

已采纳回答 / 在夏

网页是做给别人用的，比如你在空间里评论别人的说说，突然你想删除这条评论，这个时候你在html里删除吗？肯定不可能啊，这个时候我们就要提供按钮来给使用者实现删除功能

2 回答 1312 浏览

2019-03-16

改成 $('a').unwrap('<div></div>')，点击去除a标签容器。没有反应了? 在线急

已采纳回答 / 仙士可

额,你知道了那就采纳我一下呗,我想换慕课网抱枕

4 回答 1906 浏览

2017-06-15

return '<div></div>';中return '<div></div>'是什么意思来的

已采纳回答 / qq_Dandelion_3

回调，返回。意思就是返回父级div元素。

1 回答 1242 浏览

2017-04-07

为什么我点击按钮不能删除p元素的父容器div

已采纳回答 / 慕小葉

可能是你的jquery.js的引入不对，用我发的这个链接试试http://libs.baidu.com/jquery/1.9.1/jquery.js

1 回答 1106 浏览

2017-01-13

unwrap方法不接收参数，为什么放参数也可以执行呢？

已采纳回答 / ELEVEN_HE

你好，个人觉得，unwrap()方法是：去除指定元素的父元素，而父元素是唯一的，加参数和不加参数针对的都是同一个父元素。

1 回答 923 浏览

2017-01-06

unwrap第一次执行去掉了父元div，再执行第二次可以吗？

已采纳回答 / 人生就是一场梦10086

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.9.1.min.js"></script></head><body> <div> <div> ...

1 回答 868 浏览

2016-12-05

为什么用回调方法

已采纳回答 / 慕娘1095770

回调函数的话对于一些复杂的用处更好采用，这里只是为了区分回调函数和直接引用的差距，或者说是比较

2 回答 969 浏览

2016-11-17

这个例子有问题

已采纳回答 / Eric_peng

<...图片...>可以啊结果就是这样的

2 回答 772 浏览

2016-10-21

unwarp（）不是不接受参数吗？怎么案例里面又（“<div></div>”）

已采纳回答 / VictorChan

里面不管传入什么都是不管用的你给里面的参数删掉几个字符再运行就能发现了

3 回答 968 浏览

2018-08-02

全部我要发布

最热最新

只看我的

5-4 DOM包裹unwrap()方法