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 ...
随机推荐
- Gitlab Runner实现CI/CD自动化部署asp.net core应用
环境说明 一台git服务器(192.168.169.7),安装gitlab,docker. 一台web服务器(192.168.169.6),安装git,gitlab runner,docker,dot ...
- EWA不能及时通过邮件接收
1. 确保EWA已经配置成功.可以通过SW_workcenter查看 2.确保EWA的邮箱设置成功 3. 检查EWAreport产生的时间 卫星系统:SDCCN 在tab"done" ...
- C# 中写得很不错的一段代码摘出来
private void LikeMyworkEvent(EditedImg img, bool islike) //点赞自己的作品 { if (ApplicationModel.userInfo ! ...
- TCP的三次握手和四次挥手与路由器(三层)转发原理
传输层是国际标准化组织提出的开放系统互连(OSI)参考模型中的第四层.该层协议为网络端点主机上的进程之间提供了可靠.有效的报文传送服务.其功能紧密地依赖于网络层的虚拟电路或数据报服务.传输层定义了主机 ...
- What is URL Encoding and How does it work?
Introduction A URL (Uniform Resource Locator) is the address of a resource in the world wide web. UR ...
- 学习php doctrine
了解symfony3.3.PHP FIG.Doctrine: 了解angular2.material2:. 熟悉git:了解开源项目:openstack docker ceph等: NoSQL(HBa ...
- P1005 矩阵取数游戏[区间dp]
题目描述 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的\(m*n\)的矩阵,矩阵中的每个元素\(a_{i,j}\)均为非负整数.游戏规则如下: 每次取数时须从每行各取走一个元素,共n个.经过m次后 ...
- Visual Studio 快捷键、常见问题
前言 由于平时自己在使用 VS 过程中遇到过一些很常见的问题,比如基本的设置.工具等.VS 十分的强大(宇宙第一 IDE),所以有些功能藏的深也不好找,就在这里记录下. 正文 一.快捷操作 1.调试. ...
- Git 的用法
对于GIT 的用法,最近一直在寻找方法.网上也能找到一些方法.但是感觉说的不是很清楚,在这里我基于自己经验写一些. 对于任何一种方法都要安装GIT. 我是基于VS Code 2015 来做的. 在安 ...
- 在vscode中进行nodejs服务端代码调试(代码修改自动重启服务端)
使用到的是nodemon,具体在package.json文件中配置如下: "scripts": { "start": "node ./bin/www& ...