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 tools系列 expose 学习
Sep 06 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 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
php设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
PHP的拦截器实例分析
2014/11/03 PHP
php生成二维码
2015/08/10 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
技术总监的工作职责
2013/11/13 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
python获取带有返回值的多线程
2022/05/02 Python