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 相关文章推荐
IE下js调试工具Companion.JS
Oct 15 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
js确定对象类型方法
Mar 30 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 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验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
深入分析jquery解析json数据
2014/12/09 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
python排序方法实例分析
2015/04/30 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
解决python对齐错误的方法
2020/07/16 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
python数据抓取3种方法总结
2021/02/07 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
婚假请假条怎么写
2014/04/10 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
2015年社区工作总结
2015/04/08 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS