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的Theme和Theme Switcher使用小结
Sep 08 Javascript
javascript操作referer详细解析
Mar 10 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
浅谈JavaScript面向对象--继承
Mar 20 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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
海贼王:最美的悬赏令!
2020/03/02 日漫
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP数据库开发知多少
2006/10/09 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
php实现三级级联下拉框
2016/04/17 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
laravel 数据验证规则详解
2019/10/23 PHP
将list转换为json失败的原因
2013/12/17 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
小程序绑定用户方案优化小结
2019/05/15 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
Python利用递归实现文件的复制方法
2018/10/27 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Django 自定义分页器的实现代码
2019/11/24 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
少先队入队活动方案
2014/02/08 职场文书
安全标准化实施方案
2014/02/20 职场文书
给校长的建议书200字
2014/05/16 职场文书
劳动竞赛口号
2014/06/16 职场文书
物理学专业求职信
2014/07/04 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python