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 相关文章推荐
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
js 代码优化点滴记录
Feb 19 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 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 array_filter除去数组中的空字符元素
2020/06/21 PHP
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
Node.js实现数据推送
2016/04/14 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python深入学习之装饰器
2014/08/31 Python
wxPython之解决闪烁的问题
2018/01/15 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
幼儿教师培训感言
2014/03/08 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
单位作风建设自查报告
2014/10/23 职场文书
感谢信范文大全
2015/01/23 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
话题作文之呼唤
2019/12/18 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript