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中URL编码函数代码
Jan 11 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
js实现照片墙功能实例
Feb 05 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
layui前端时间戳转化实例
Nov 15 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 fsockopen函数被禁用的解决办法
2013/08/07 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python pymongo模块用法示例
2018/03/31 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
strstr()的简单实现
2013/09/26 面试题
经典c++面试题六
2012/01/18 面试题
专业销售业务员求职信
2013/11/18 职场文书
加入学生会演讲稿
2014/04/24 职场文书
征兵宣传标语
2014/06/20 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
2014年建筑工作总结
2014/11/26 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
PHP 时间处理类Carbon
2022/05/20 PHP