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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
Element Carousel 走马灯的具体实现
Jul 26 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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
Python实现代码块儿折叠
2020/04/15 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
python 实现Harris角点检测算法
2020/12/11 Python
python基于opencv实现人脸识别
2021/01/04 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
C语言开发工程师测试题
2016/12/20 面试题
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
初任培训自我鉴定
2013/10/07 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
街道务虚会发言材料
2014/10/20 职场文书
家长通知书家长意见
2014/12/30 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
php修改word的实例方法
2021/11/17 PHP
Python简易开发之制作计算器
2022/04/28 Python