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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
vue.js中created方法作用
Mar 30 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
优化javascript的执行速度
2010/01/23 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
JS简单计算器实例
2015/01/20 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
Python测试网络连通性示例【基于ping】
2018/08/03 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
在python中实现对list求和及求积
2018/11/14 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
python线性插值解析
2020/07/05 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
先进党支部事迹材料
2014/01/13 职场文书
电气工程自动化求职信
2014/03/14 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
父母教会我观后感
2015/06/17 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
Redis批量生成数据的实现
2022/06/05 Redis