浅析jQuery删除节点的三个方法
2016-01-22 14:13
736 查看
jQuery提供了三种删除节点的方法,即remove(),detach()和empty()。
测试所用HTML代码:
1、remove()方法
当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。
2、detach()方法
detach()和remove()一样,也是从DOM中去掉所有匹配的元素。但需要注意的是,这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据都会保留下来。
3、empty()方法
严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点
参:
测试所用HTML代码:
<p title="选择你最喜欢的水果?">你最喜欢的水果是?</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul>
1、remove()方法
$("ul li").click(function(){ alert($(this).html()); }); var $li = $("ul li:eq(1)").remove(); $li.appendTo("ul");
当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。
2、detach()方法
var $li = $("ul li:eq(1)").detach(); $li.appendTo("ul");
detach()和remove()一样,也是从DOM中去掉所有匹配的元素。但需要注意的是,这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据都会保留下来。
3、empty()方法
var $li = $("ul li:eq(1)").empty(); $li.appendTo("ul");
严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点
参:
诗意战争 浅析jQuery删除节点的三个方法
相关文章推荐
- jquery和jqueryMobile的js文件引入
- jQuery--each遍历使用方法
- jQuery中遇到的坑
- struts2+jquery实现ajax异步提交并返回json串
- jQuery中attr()函数 VS prop()函数
- jquery懒加载图片的插件 jquery懒加载图片的插件
- jquery刷新iframe页面的方法
- jQuery Mobile加载外部文件的问题
- jQuery之基础选择器
- jquery日历插件datepicker用法分析
- jQuery事件之中有其他事件,return 和局部变量无效
- jQuery UI 对话框(Dialog) - 模态表单
- jquery.validate提示错误信息位置方法
- jQuery ajax时间差导致的变量赋值问题分析
- jQuery简单获取键盘事件的方法
- 利用jquery.validate异步验证用户名是否存在
- 自己封装的ajax
- EasyUi、SpringMVC、jquery的ajax、导出Excel文件
- JQuery 判断某个属性是否存在 hasAttr
- JQuery 的跨域方法 可跨任意网站