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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
Javascript 跨域访问解决方案
Feb 14 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 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
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
详解YII关联查询
2016/01/10 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
《李广射虎》教学反思
2014/04/27 职场文书
市场营销工作计划书
2014/05/06 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
护士岗位竞聘书
2015/09/15 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
分享几个简单MySQL优化小妙招
2022/03/31 MySQL