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 相关文章推荐
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
将list转换为json失败的原因
Dec 17 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
three.js如何实现3D动态文字效果
Mar 03 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
实用函数3
2007/11/08 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python nmap实现端口扫描器教程
2020/05/28 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
彪马英国官网:PUMA英国
2019/02/11 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
远程调用的原理
2014/07/05 面试题
学生会竞选自荐信
2013/10/12 职场文书
建筑专业自荐信
2013/10/18 职场文书
广告设计应届生求职信
2014/03/01 职场文书
生日寄语大全
2014/04/08 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
法律系毕业生求职信
2014/05/28 职场文书
新书发布会策划方案
2014/06/09 职场文书
网络管理员岗位职责
2015/02/12 职场文书
重阳节简报
2015/07/20 职场文书
git中cherry-pick命令的使用教程
2022/06/25 Servers