js 删除节点
亲身经历,寻得此法,告知大家===============
在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>
js 删除节点的更多相关文章
- js 删除节点,jquery遍历通过内容定位节点
$(".class1 .class2").each(function (index, item) { var gettedValue = $(item).find(".c ...
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- JQuery_DOM 节点操作之复制、替换和 删除节点
一.复制节点 <script type="text/javascript" src="jquery-1.12.3.min.js"></scri ...
- jQuery – 7.动态创建Dom、删除节点
动态创建Dom节点 1.使用$(html字符串)来创建Dom节点 2.append方法用来在元素的末尾追加元素 案例:动态生成网站列表 3.prepend,在元素的开始 ...
- js获取节点的DOM操作
一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...
- 第十四课:js操作节点的插入,复制,移除
节点插入 appendChild方法,insertBefore方法是常用的两个节点插入方法,具体实现,请看js高级程序设计,或者自行百度. 这里提一下面试时经常会问到的问题,插入多个节点时,你是怎么插 ...
- bootstrap jQuery Ztree异步载入数据,check选择&可加入、改动、删除节点
效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...
- JS添加节点方法与JQuery添加节点方法的比较及总结
原生JS添加节点方法与JQuery添加节点方法的比较及总结 一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...
- jQuery选择器(添加节点及删除节点及克隆及替换及包装)第九节
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- werkzeug/routing.py-Rule源码分析
Rule类主要用来定义和表示一个URL的模式.主要定义了一些关键字参数,用来改变url的行为.例如:这个url可以接收的请求方法,url的子域名,默认路径,端点名称,是否强制有斜杠在末尾等等 在最开始 ...
- 缓存数据库memcache、redis原理对比
一.问题: 数据库表数据量极大(千万条),要求让服务器更加快速地响应用户的需求. 二.解决方案: 1.通过高速服务器Cache缓存数据库数据 2.内存数据库 (这里 ...
- 190906mysql常用语法
1.创删数据库: create database mydb; 复杂一点可以设置字符集和校对规则:create database mydb character set gbk collate gbk_c ...
- AttributeError: 'NoneType' object has no attribute 'extend'
Python使用中可能遇到的小问题 AttributeError: 'NoneType' object has no attribute 'extend' 或者AttributeError: 'Non ...
- 关于MQ的几件小事(一)消息队列的用途、优缺点、技术选型
1.为什么使用消息队列? (1)解耦:可以在多个系统之间进行解耦,将原本通过网络之间的调用的方式改为使用MQ进行消息的异步通讯,只要该操作不是需要同步的,就可以改为使用MQ进行不同系统之间的联系,这样 ...
- Alpha2版本相互测试
[作业信息] Q A 作业所属课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign/ 作业要求 https: ...
- java相关网址汇总1
Java网站汇总 官方 框架 数据库 资源网站 视频学习网站 开发工具 其他工具 github/gitee框架项目 社区 博客/个人 官方 Sun公司网站Sun公司中文网站J2SE下载网站JavaSE ...
- 《AlwaysRun!》第五次作业:项目需求分析改进与系统设计
项目 内容 这个作业属于哪个课程 2016级软件工程(西北师范大学) 这个作业的要求在哪里 实验九 团队作业5—团队项目需求改进与系统设计 团队名称 Always Run! 作业学习目标 (1)掌握 ...
- 【原创】改进的大马webshell,过市面上任何防护
因为之前使用的webshell大马很多都没用了,都被安全防护拦截了,所以通过几个大牛的指点和网上的教程整理而成自己做的增强版的webshell大马,我这个是源码,部分无加密! <?php $pa ...
- 用Python写网络爬虫 第二版
书籍介绍 书名:用 Python 写网络爬虫(第2版) 内容简介:本书包括网络爬虫的定义以及如何爬取网站,如何使用几种库从网页中抽取数据,如何通过缓存结果避免重复下载的问题,如何通过并行下载来加速数据 ...