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 相关文章推荐
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
JS常用算法实现代码
Nov 14 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
angular 服务随记小结
May 06 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
详解django自定义中间件处理
2018/11/21 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python实现飞机大战小游戏
2019/11/08 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
python的help函数如何使用
2020/06/11 Python
python识别验证码的思路及解决方案
2020/09/13 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
销售自荐信
2013/10/22 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
水电工程师岗位职责
2015/02/13 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
优秀员工演讲稿
2019/06/21 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
Python中的套接字编程是什么?
2021/06/21 Python
浅谈MySQL之select优化方案
2021/08/07 MySQL
MySQL读取JSON转换的方式
2022/03/18 MySQL