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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
JavaScript Promise 用法
Jun 14 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
PHP中动态HTML的输出技术
2006/10/09 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
js资料prototype 属性
2007/03/13 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
Pycharm远程调试openstack的方法
2017/11/21 Python
python flask框架实现重定向功能示例
2019/07/02 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
Python hashlib模块的使用示例
2020/10/09 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
党员组织关系介绍信
2014/02/13 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
怎样写离婚协议书
2014/09/10 职场文书
花田少年史观后感
2015/06/16 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL