Javascript删除指定元素节点的方法


Posted in Javascript onJune 21, 2016

在javascript操作dom树的时候可能会经常遇到增加,删除节点的事情,比如一个输入框后一个增加按钮,一个删除按钮,点击增加就增加 个输入框,点击删除就删除对应的输入框。在一些js框架,如Prototype中,可以用element.remove()来删除一个节点,核心JS中并 没有这样的方法,IE中有这样一个方法:removeNode(),尝试运行下面的代码

<div><input onclick="removeNode(this)" type="text" value="点击移除该输入框" /></div>

可以发现,这个方法在IE下是好使的,但是在Firefox等标准浏览器中就会报错了 removeNode is not defined,但是在核心JS中有一个操作DOM节点的方法叫:removeChild(),看名字应该就知道是移除子节点的,那么我们就可以变通一下 来实现移除指定的节点了,我们可以先去找到要删除节点的父节点,然后在父节点中运用removeChild来移除我们想移除的节点。我们可以定义一个方 法,就叫removeElement吧。

function removeElement(_element){
 var _parentElement = _element.parentNode;
 if(_parentElement){
  _parentElement.removeChild(_element); 
 }
}

尝试运行下面的代码,可以在各种浏览器中正确执行了。

<script type="text/javascript">
function removeElement(_element){
 var _parentElement = _element.parentNode;
 if(_parentElement){
  _parentElement.removeChild(_element);
 }
}
</script>
<div><input onclick="removeElement(this)" type="text" value="点击移除该输入框" /></div>

以上就是本文的全部内容,了解更多JavaScript的语法,大家可以查看:《JavaScript 参考教程》、《JavaScript代码风格指南》,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
JS实现打字游戏
Dec 17 Javascript
jQuery插件扩展测试实例
Jun 21 #Javascript
早该知道的7个JavaScript技巧
Jun 21 #Javascript
BootStrap实现树形目录组件代码详解
Jun 21 #Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 #Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 #Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 #Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 #Javascript
You might like
PHP文本数据库的搜索方法
2006/10/09 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python性能提升之延迟初始化
2016/12/04 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python递归函数特点及原理解析
2020/03/04 Python
如何理解python对象
2020/06/21 Python
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
夜大毕业生自我评价分享
2013/11/10 职场文书
会计职业生涯规划书
2014/01/13 职场文书
干部下基层实施方案
2014/03/14 职场文书
学位证书委托书
2014/09/30 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
签字仪式主持词
2015/07/03 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书