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 相关文章推荐
禁用JavaScript控制台调试的方法
Mar 07 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
JS轮播图的实现方法
Aug 24 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php header()函数使用说明
2008/07/10 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
php session 写入数据库
2016/02/13 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
python中实现定制类的特殊方法总结
2014/09/28 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
财务经理的岗位职责
2013/12/17 职场文书
大学运动会通讯稿
2014/01/28 职场文书
会计专业自荐书
2014/07/08 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
Redis 异步机制
2022/05/15 Redis