JavaScript删除指定子元素代码实例


Posted in Javascript onJanuary 13, 2015

原生javascript删除指定子元素代码实例:

本章节介绍一下如何利用原生javascript实现删除指定子元素。
大家都知道使用jquery实现此功能更为方便,不过使用原生的javascript也不麻烦,下面做一下介绍。
关于jquery如何实现此功能可以参阅jquery删除指定子元素代码实例一章节。

代码实例:

<!DOCTYPE HTML>

<html>

<meta charset="utf-8">

<title>三水点靠木</title>

<style>

ul li{

  width:400px;

  height:30px;

  line-height:30px;

  list-style:none;

}

</style>

<script>

window.onload=function(){

  var obt=document.getElementById("bt");

  var obox=document.getElementById("box");

  var lis=obox.getElementsByTagName("li");

  obt.onclick=function(){

    obox.removeChild(lis[1]);

  }

}

</script>

</head>

<body>

<ul id="box">

  <li>三水点靠木欢迎您,只有努力奋斗才会有美好的明天。</li>

  <li>没有任何人一开始就是高手,必须要努力奋斗才行。</li>

  <li>每一天都是新的,要好好的珍惜时间。</li>

</ul>

<input type="button" id="bt" value="查看效果"/>

</body>

</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

代码注释:

1.window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
2.var obt=document.getElementById("bt"),获取按钮元素对象。
3.var obox=document.getElementById("box"),获取id属性值为box的元素对象。
4.var lis=obox.getElementsByTagName("li"),获取box元素下的li元素集合。
5.obt.onclick=function(){},为按钮注册click事件处理函数。
6.obox.removeChild(lis[1]),删除父元素的指定子元素。

Javascript 相关文章推荐
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
js实现计算器功能
Aug 10 Javascript
JS长整型精度问题实例分析
Jan 13 #Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 #Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 #Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 #Javascript
javascript面向对象之this关键词用法分析
Jan 13 #Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 #Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 #Javascript
You might like
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
第八节--访问方式
2006/11/16 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
php构造函数的继承方法
2015/02/09 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
详解Python中time()方法的使用的教程
2015/05/22 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
django 模型字段设置默认值代码
2020/07/15 Python
Django自带的用户验证系统实现
2020/12/18 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
世界经理人咨询有限公司面试
2014/09/23 面试题
蟋蟀的住宅教学反思
2014/04/26 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
在校生证明
2015/06/17 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
升职自荐书
2019/05/09 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis