苏飞论坛

标题: jQuery文档处理之删除文档html内容用法解析大全 [打印本页]

作者: 范范 时间: 2018-3-22 22:40
标题: jQuery文档处理之删除文档html内容用法解析大全

jQuery文档处理之删除文档html内容用法解析大全

在开发中，经常会遇到删除部分html，进行页面文档内容的重新处理，在此处就主要讲解下jQuery的文档处理中的删除的各个用法。

删除文档内容，主要有一下几种方法

[C#] 纯文本查看 复制代码

1. empty()  删除匹配的元素集合中所有的子节点。

2. remove([expr])  从DOM中删除所有匹配的元素。

3. detach([expr])  从DOM中删除所有匹配的元素。

1. empty()

删除匹配的元素集合中所有的子节点。
从讲解中就可以看出， empty（），主要就是清除匹配元素中的所有html，但是该匹配到的元素还是存在的，只是内容为空了。

实例
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("p").empty()

输出结果：

[JavaScript] 纯文本查看 复制代码

<p></p>

附件html：

[HTML] 纯文本查看 复制代码

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

备注：
从输出结果也能验证到，此处 清除的只有p标签中的内容，但是p标签还是存在的，并不影响页面的整理布局

2. remove([expr])

从DOM中删除所有匹配的元素。

实例1
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("p").remove()

输出结果：

[JavaScript] 纯文本查看 复制代码

how are

附件HTML：

[HTML] 纯文本查看 复制代码

<p>Hello</p> how are <p>you?</p>

实例2
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("p").remove(".hello")

输出结果：

[JavaScript] 纯文本查看 复制代码

how are <p>you?</p>

附件html：

[HTML] 纯文本查看 复制代码

<p class="hello">Hello</p> how are <p>you?</p>

备注：
从以上两个实例均可以看出， remove（）是直接 删除了匹配到的元素，删除后在页面上直接找不到该匹配元素

3. detach([expr])

从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

实例
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("p").detach()

输出结果：

[JavaScript] 纯文本查看 复制代码

how are

附件HTML：

[HTML] 纯文本查看 复制代码

<p>Hello</p> how are <p>you?</p>

备注：
从此处可以看到，detach与remove，在页面文档处理中是一样的，直接删除了该元素的所有内容，包括元素本身
但是切记 detach与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

作者: 范范 时间: 2018-3-22 22:52
还是第一次知道，清除网页内容，还有detach，涨下知识楼

作者: 站长苏飞 时间: 2018-3-23 10:55
强烈支持楼主ing……

欢迎光临苏飞论坛 (http://www.sufeinet.com/)