JS实现DOM删除节点操作示例


Posted in Javascript onApril 04, 2018

本文实例讲述了JS实现DOM删除节点操作。分享给大家供大家参考,具体如下:

一 介绍

删除节点通过使用removeChild()方法来实现。

removeChild()方法用来删除一个子节点。

obj. removeChild(oldChild)
oldChild:表示需要删除的节点。

二 应用

删除节点,本示例将通过DOM对象的removeChild()方法,动态删除页面中所选中的文本。

三 代码

<!DOCTYPE html>
<html>
<head>
<title>3water.com 删除节点</title>
<script language="javascript">
<!--
function delNode()
{
var deleteN=document.getElementById('di');
if(deleteN.hasChildNodes())
{
  deleteN.removeChild(deleteN.lastChild);
}
}
-->
</script>
</head>
<body>
<h1>删除节点</h1>
<div id="di">
<p>第一行文本</p>
<p>第二行文本</p>
<p>第三行文本</p>
</div>
<form>
<input type="button" value="删除" onclick="delNode();"/>
</form>
</body>
</html>

四 运行结果

JS实现DOM删除节点操作示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
JS实现的DOM插入节点操作示例
Apr 04 #Javascript
AngularJS 应用模块化的使用
Apr 04 #Javascript
vue todo-list组件发布到npm上的方法
Apr 04 #Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 #Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 #Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 #Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 #Javascript
You might like
php中session与cookie的比较
2015/01/27 PHP
php建立Ftp连接的方法
2015/03/07 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
键盘KeyCode值列表汇总
2013/11/26 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
node.js require() 源码解读
2015/12/13 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
pytorch之添加BN的实现
2020/01/06 Python
python实现微信打飞机游戏
2020/03/24 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
采购助理岗位职责
2014/02/16 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
Python合并pdf文件的工具
2021/07/01 Python