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 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
20个最新的jQuery插件
Jan 13 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
javascript 用函数实现继承详解
May 28 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 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中ADODB类详解
2008/03/25 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python3读取zip文件信息的方法
2015/05/22 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
python将音频进行变速的操作方法
2020/04/08 Python
PHP如何防止SQL注入
2014/05/03 面试题
C# Debug和Testing相关面试题
2015/10/25 面试题
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
医学专业毕业生个人求职信
2013/12/25 职场文书
手机银行营销方案
2014/03/14 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Python max函数中key的用法及原理解析
2021/06/26 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript