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 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
Javascript打印网页部分内容的脚本
Nov 17 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
Vue中keep-alive组件的深入理解
Aug 23 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
mysql limit查询优化分析
2008/11/12 PHP
sae使用smarty模板的方法
2013/12/17 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
PDO::rollBack讲解
2019/01/29 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
python列表list保留顺序去重的实例
2018/12/14 Python
kafka-python批量发送数据的实例
2018/12/27 Python
更新修改后的Python模块方法
2019/03/03 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python适配器模式代码实现解析
2019/08/02 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
降价通知函
2015/04/23 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python