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 ...
随机推荐
- 第4章 JIT编译器
4.1 JIT概览 语言根据执行的方式不同分为编译型语言和解释型语言.以C++为代表的编译型语言在执行前需要编译成机器码,不同的CPU需要不同的编译器,编译成功后在同一台机器不需再次编译.以Pytho ...
- 【转载】C#中将字符串分割成字符数组
在C#中字符串类型String是由一系列的单个字符组合而成,其实可以通过字符串String对象ToCharArray()方法来将字符串中的元素逐一存在数据类型为Char的一维数组中. 例如将字符str ...
- javascript/js实现 排序二叉树数据结构 学习随笔
二叉树是一种数据结构.其特点是: 1.由一系列节点组成,具有层级结构.每个节点的特性包含有节点值.关系指针.节点之间存在对应关系. 2.树中存在一个没有父节点的节点,叫做根节点.树的末尾存在一系列没有 ...
- FICO-清帐函数
转载:https://www.cnblogs.com/caizjian/p/8067071.html https://blog.csdn.net/sapliumeng/article/details/ ...
- bootstrap 模态窗口 多重/多个弹窗滚动条补丁
由于bootstrap的模态窗口默认不支持多次弹出, 在关闭的时候会有滚动条消失的问题. 经过观察和查看源码, 发现在开启和关闭的时候会在body上增加/减少一个"modal-open&qu ...
- OpenStack kilo版(5) Neutron部署
neutron简介: Neutron 通过 plugin 和 agent 提供的网络服务. plugin 位于 Neutron server,包括 core plugin 和 service plug ...
- 【前端开发】ES6知识点系统化梳理笔记
>ES6扩展: #Map和Set是es6标准新增的数据类型 ##Map是key-value(关键字-值),Map允许修改value,不允许修改key,Map支持下标操作 var m = new ...
- Django的安装和使用
一.安装 ① 命令行安装 # 命令提示符下 # 方式一 pip install django==1.11.16 -i https://pypi.tuna.tsinghua.edu.cn/simple ...
- Windows——Thinkpad 开机显示pwmtr64v.dll找不到指定的模块
解决方法:进入设备管理器,展开系统设备分页,找到Lenovo Power Manager ,右键,更新驱动程序,浏览计算机上的驱动程序, 让我从计算机上的可用驱动程序列表中选取,选择Lenovo Po ...
- attr方法笔记(反射)
attr方法笔记 attr中用到了四个内置面向对象方法(__getattr__,__setattr__,__hasattr__,__delattr__),这称为反射,由于python中一切皆对象,反射 ...