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 继承详解 第一篇
Aug 30 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
javascript数组去重方法分析
Dec 15 Javascript
关于使用js算总价的问题
Jun 23 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
vue引用外部JS的两种种方法
Jan 28 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
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php中file_exists函数使用详解
2015/05/08 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python中list列表的高级函数
2016/05/17 Python
Python中生成Epoch的方法
2017/04/26 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
python 自动去除空行的实例
2018/07/24 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python unichr函数知识点总结
2020/12/16 Python
html5 标签
2009/07/16 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
中学生自我评价范文
2014/02/08 职场文书
工程安全员岗位职责
2014/03/09 职场文书
政府个人对照检查材料
2014/08/28 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
angular4实现带搜索的下拉框
2022/03/25 Javascript
Linux中如何安装并部署Redis
2022/04/18 Servers
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技