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 树形结构的选择器
Feb 15 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
Javascript confirm多种使用方法解析
Sep 25 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删除数组中空值的方法介绍
2014/04/14 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
js tab效果的实现代码
2009/12/26 Javascript
jQuery 技巧小结
2010/04/02 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
Python 多线程的实例详解
2017/09/07 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
劳动模范事迹材料
2014/01/19 职场文书
实践单位评语
2014/04/26 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
酒店端午节活动方案
2014/08/26 职场文书
银行授权委托书样本
2014/10/13 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL