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 相关文章推荐
splice slice区别
Oct 09 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
Vue中 axios delete请求参数操作
Aug 25 Javascript
vue实现顶部菜单栏
Nov 08 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文件上传表单摘自drupal的代码
2011/02/15 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
python xlsxwriter模块的使用
2020/12/24 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
大学生在校表现评语
2014/12/31 职场文书
经营场所使用证明
2015/06/19 职场文书
药房管理制度范本
2015/08/06 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers