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 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
Aptana调试javascript图解教程
Nov 30 Javascript
Javascript Object.extend
May 18 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 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和asp中的redirect比较
2006/10/09 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
如何打开php的gd2库
2017/02/09 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
python实现最小二乘法线性拟合
2019/07/19 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
文秘专业个人求职信
2013/12/22 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
实验教师岗位职责
2014/02/13 职场文书
学校对教师的评语
2014/04/28 职场文书
工业设计专业自荐书
2014/06/05 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书