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 17 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
理解javascript闭包
Dec 15 Javascript
BootStrap 导航条实例代码
May 18 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php检测url是否存在的方法
2015/04/14 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
详解小程序横屏方案对比
2020/06/28 Javascript
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
python实现贪吃蛇双人大战
2020/04/18 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
金属材料工程个人求职的自我评价
2013/12/04 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
园艺师求职信
2014/03/10 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
失职检讨书大全
2015/01/26 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
家属联谊会致辞
2015/07/31 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
讲解MySQL增删改操作
2022/05/06 MySQL