DOM节点删除之empty和remove
DOM节点删除之empty和remove
刚学了新知识，虽然是一个小知识点，但还是忍不住想和大家分享。
.empty()是指对该节点后代的删除，结果是清空该节点（该节点里面已无元素）。
.remove()是指删除该节点，结果是删除该节点(该节点及其后代元素都将不存在)。
下面放代码来说明。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js "></script>
<style>
body{
background: #ffe5aa;
}
#test1{
width:100px;
height:100px;
background: #3db7ff;
}
#test2{
width:100px;
height:100px;
background: #ff179f;
}
</style>
</head>
<body>
<div class="whole">
<button class="bt1">通过empty删除节点</button>
<button class="bt2">通过remove删除节点</button>
</div>
<div id="test1">
<p>元素1</p>
<p>元素2</p>
</div>
<div id="test2">
<p>元素3</p>
<p>元素4</p>
</div>
<script type="text/javascript">
$(".bt1").on('click',function(){
$("#test1").empty();
})
$(".bt2").on('click',function(){
$("#test2").remove();
})
</script>
</body>
</html>
点击运行后，出现以下画面。
点击button1,将执行.empty()指令，预期将删除test1子节点元素。结果如下。
再点击button2,将执行.remove()指令。预期将删除test2及其后代子节点元素。结果如下。
以上就是DOM节点删除之empty和remove的区别，第一次写博客，不好请谅解。
DOM节点删除之empty和remove的更多相关文章
- DOM节点删除之empty和remove区别
要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty和remove方法 empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只 ...
- jQuery之empty、remove、detach
三者都有把元素移除的作用,但细微的差别,造就了它们的使命不同. 最权威的解释当然是jQuery_API咯,下面是API中关于他三儿的部分截取. 一.empty: This method removes ...
- jquery之empty()与remove()区别
要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现.可仔细观察效果的话就可以发现.empty()是只移除了 指定元素中的所有子节点,拿$("p" ...
- empty()与remove([expr])的区别.转
jquery之empty()与remove()区别 要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现.可仔细观察效果的话就可以发现.empty()是只移除了 ...
- JavaScript 中 empty、remove 和 detach的区别
内容 empty.remove 和 detach的区别 jQuery 操作 DOM 之删除节点 方法名 元素所绑定的事件及数据是否也被移除 作用 $(selector).empty() 是 从被选元素 ...
- 说一说Jquery中的empty()与remove()的区别和用法
今天在改一个新人写的代码,好吧,我承认改代码比自己写代码要来的痛苦. 主要是在测试一个table.table中有一列是删除操作.我的删除功能是 这样的,当点击删除的时候,判断这个table中的tr行是 ...
- js empty() vs remove()
转自:jQuery empty() vs remove() empty() will remove all the contents of the selection. remove() will r ...
- JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用
html方法,给元素添加html代码或者清空html代码(参数为空字符串): append向元素的末尾添加html代码: appendTo这个方法跟append方法的很像,只是要添加的html代码的目 ...
- jQuery文档操作--empty()和remove()
empty() 概述 删除匹配的元素集合中所有的子节点 <!DOCTYPE html> <html> <head> <meta charset="U ...
随机推荐
- HBuilder CSS 自定义代码块
=begin 本文档是CSS代码块的编辑文件.注意不要把其他语言的设置放到css里来. HBuilder可使用ruby脚本来编辑代码块和增强操作命令. 1.编辑代码块 如果要新增一个代码块,复制如下一 ...
- 项目笔记---CSharp图片处理
原文:项目笔记---CSharp图片处理 项目笔记---CSharp图片处理 最近由于项目上需要对图片进行二值化处理,就学习了相关的图片处理上的知识,从开始的二值化的意义到动态阀值检测二值化等等,并用 ...
- Visual Studio 单元测试之四---Generic测试
原文:Visual Studio 单元测试之四---Generic测试 这里的Generic我觉得理解为外部测试更合适.因为在这种测试模式下Visual Studio只是启动一个外部的程序,然后通过返 ...
- SAE设置记录：修改config.yaml实现地址重写和修改固定链接
刚搭建完sae博客后闲置下来了,偶尔写两篇文章,最近想整理整理sae,于是开始. 刚新建完博客修改固定链接,可是保存后直接访问出现问题,访问不到文章了,而且我的博客地址前面会出现"1.&qu ...
- Linux下使用Photorec恢复误格U盘
photorec包含在testdisk软件包中, 所以直接通过包管理器直接安装testdisk安装即可. 使用root权限来运行软件,在终端键入 [shell] photorec [/shell] 然 ...
- 解决wps for linux 中文输入法光标不跟随的问题
需要安装qt4-qtconfig和ibus-qt4,安装ibus-qt4之后才能在qt4-qtconfig“界面”选项卡默认输入法选项中看到ibus,选定它,然后设置XIM输入风格为光标跟随风格,保存 ...
- LeetCode之Reverse Words in a String
1.(原文)问题描述 Given an input string, reverse the string word by word. For example, Given s = "the ...
- MVC5系列——布局视图
MVC5系列——布局视图 目录 系列文章 概述 布局视图 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加 ...
- SpringMVC格式化显示
SpringMVC学习系列(7) 之 格式化显示 在系列(6)中我们介绍了如何验证提交的数据的正确性,当数据验证通过后就会被我们保存起来.保存的数据会用于以后的展示,这才是保存的价值.那么在展示的时候 ...
- Hdu 1016 Prime Ring Problem (素数环经典dfs)
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...