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 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
很棒的vue弹窗组件
May 24 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
vue数据字典取键值项目的字典问题
Apr 12 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仿ZOL分页类代码
2008/10/02 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Python3.7中安装openCV库的方法
2018/07/11 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
python默认参数调用方法解析
2020/02/09 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
给民警的表扬信
2014/01/08 职场文书
总裁助理岗位职责
2014/02/17 职场文书
党支部活动策划方案
2014/08/18 职场文书
敬老月活动总结
2014/08/28 职场文书
律师催款函范文
2015/06/24 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书