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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
js实现复制粘贴的两种方法
Dec 04 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
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
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
python 星号(*)的多种用途
2020/09/21 Python
Python基于Faker假数据构造库
2020/11/30 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
香港礼品网站:GiftU eshop
2017/09/01 全球购物
大学生怎样进行自我评价
2013/12/07 职场文书
手机业务员岗位职责
2013/12/13 职场文书
小学生评语大全
2014/04/18 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技