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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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 sybase_fetch_array使用方法
2014/04/15 PHP
浅谈php://filter的妙用
2019/03/05 PHP
JQuery筛选器全系列介绍
2013/08/27 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
python 调用HBase的简单实例
2016/12/18 Python
python如何实现异步调用函数执行
2019/07/08 Python
实现Python与STM32通信方式
2019/12/18 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
土木工程应届生求职信
2013/10/31 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
教师旷工检讨书
2014/01/18 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
自主招生推荐信范文
2014/05/10 职场文书
产品发布会策划方案
2014/05/12 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
护士自荐信怎么写
2015/03/06 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书