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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
Jquery获取radio选中的值
May 05 jQuery
详解AngularJS controller调用factory
May 19 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
vue实现五子棋游戏
May 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使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP 类与构造函数解析
2017/02/06 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
简单的js表格操作
2016/09/24 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
详解Python中dict与set的使用
2015/08/10 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
详解python3中的真值测试
2018/08/13 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
python 通过exifread读取照片信息
2020/12/24 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
违反学校规定检讨书
2014/01/18 职场文书
大学毕业感言一句话
2014/02/06 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
大学生暑期实践感言
2014/02/26 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
python删除csv文件的行列
2021/04/06 Python
python3 sqlite3限制条件查询的操作
2021/04/07 Python