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与Prototype并存的冲突的解决方法
Aug 29 Javascript
js异或加解密效果代码
Jun 25 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
全面分析JavaScript 继承
May 30 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
jQuery实现开关灯效果
Aug 02 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
php框架Phpbean说明
2008/01/10 PHP
php遍历目录viewDir函数
2009/12/15 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
python实时监控cpu小工具
2018/06/21 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
军训教官感言
2014/03/02 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
雷人标语集锦
2014/06/19 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
教师节作文之小学四年级
2019/09/03 职场文书