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 相关文章推荐
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 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
ThinkPHP分页实例
2014/10/15 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
详解PHP队列的实现
2019/03/14 PHP
js版本A*寻路算法
2006/12/22 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
python实现简易版计算器
2020/06/22 Python
python 实现A*算法的示例代码
2018/08/13 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
python实现海螺图片的方法示例
2019/05/12 Python
wxpython绘制音频效果
2019/11/18 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
开发房地产协议书
2014/09/14 职场文书
关于运动会的广播稿
2014/09/22 职场文书
辩护词格式
2015/05/22 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS