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实现的一个include函数
Jul 21 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 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在服务器执行exec命令失败的解决方法
2012/03/03 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Python返回数组/List长度的实例
2018/06/23 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Django之腾讯云短信的实现
2020/06/12 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
用Python进行websocket接口测试
2020/10/16 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
绩效管理实施方案
2014/03/19 职场文书
文化产业实施方案
2014/06/07 职场文书
诚信考试标语
2014/06/24 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
三八活动策划方案
2014/08/17 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
文明单位创建材料
2014/12/24 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
分家协议书范本
2016/03/22 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android