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 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
Angular路由简单学习
Dec 26 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
js中作用域的实例解析
Mar 16 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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的安全策略
2006/10/09 PHP
浅析PHP水印技术
2007/02/14 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
javascript 图片裁剪技巧解读
2012/11/15 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Python中的闭包实例详解
2014/08/29 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
int在python中的含义以及用法
2019/06/27 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
异步传递消息系统的作用
2016/05/01 面试题
2014年文学毕业生自我鉴定
2014/04/23 职场文书
质量安全标语
2014/06/07 职场文书
优秀班组申报材料
2014/12/25 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
国际贸易实训总结
2015/08/03 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript