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()不同的是,所有绑定的事件、附加的数据等都会保留下来
|