DOM节点删除函数removeChild()用法实例


Posted in Javascript onJanuary 12, 2015

本文实例讲述了DOM节点删除函数removeChild()用法。分享给大家供大家参考。具体分析如下:

DOM删除一个节点,必须要站在父节点的高度去删除,代码如下:

<html>

<head>

<script type="text/javascript">

function t(){

 //思路:1.首先找到要删除的节点;2. 找到它的父节点,在父节点的角度删除子节点

 var nodeul = document.getElementsByTagName('ul')[0];//找到父节点

 var li_lan = nodeul.children[2];//找到要删除的子节点

 nodeul.removeChild(li_lan);//使用removeChild()函数删除

}

</script>

</head>

<body>

<div id="container">

 <ul>

  <li>春天</li>

  <li>夏天</li>

  <li>蓝天</li>

  <li>秋天</li>

  <li>冬天</li>

 </ul>

</div>

<div id="copyul">

</div>

<hr />

<button onclick="t()" value="">删除一个子节点</button>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JS冒泡事件的快速解决方法
Dec 16 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 #Javascript
原生javascript实现图片按钮切换
Jan 12 #Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 #Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 #Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 #Javascript
推荐4个原生javascript常用的函数
Jan 12 #Javascript
原生js实现日期联动
Jan 12 #Javascript
You might like
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python实现textrank关键词提取
2018/06/22 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
广告学专业推荐信范文
2013/11/23 职场文书
出纳岗位职责模板
2013/11/27 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
促销活动计划书
2014/05/02 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript