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 相关文章推荐
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
基于JavaScript实现控制下拉列表
May 08 Javascript
js实现菜单跳转效果
Dec 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
根德YB400的电路分析
2021/03/02 无线电
使用数据库保存session的方法
2006/10/09 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
为你总结一些php信息函数
2015/10/21 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
python的re模块应用实例
2014/09/26 Python
python将文本转换成图片输出的方法
2015/04/28 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
python3调用windows dos命令的例子
2019/08/14 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
python实现人工蜂群算法
2020/09/18 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
入党自我鉴定
2014/03/25 职场文书
学历公证委托书
2014/04/09 职场文书
小学三年级学生评语
2014/04/22 职场文书
员工工作表现评语
2014/04/26 职场文书
办公室禁烟通知
2015/04/23 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书