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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 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不用正则验证真假身份证
2013/11/06 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
Python包和模块的分发详细介绍
2020/06/19 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
市场营销个人求职信范文
2014/02/02 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
环保倡议书范文
2014/05/12 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS