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 相关文章推荐
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
js实现简单页面全屏
Sep 17 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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读取xml方法介绍
2013/01/12 PHP
php上传大文件设置方法
2016/04/14 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
js实现随机8位验证码
2020/07/24 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
K-近邻算法的python实现代码分享
2017/12/09 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
python框架中flask知识点总结
2018/08/17 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
标准离婚协议书范文下载
2014/11/30 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
python实现过滤敏感词
2021/05/08 Python
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers