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 多浏览器 事件大全
Mar 23 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
js中的this的指向问题详解
Aug 29 Javascript
你准备好迎接vue3.0了吗
Apr 28 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
浅谈php7的重大新特性
2015/10/23 PHP
js停止输出代码
2008/07/20 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
简单谈谈原生js的math对象
2017/06/27 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
numpy实现RNN原理实现
2021/03/02 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
护士自我介绍信
2014/01/13 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
小学生差生评语
2014/12/29 职场文书
社区端午节活动总结
2015/02/11 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP