亲身经历,寻得此法,告知大家===============

在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 删除节点的更多相关文章

  1. js 删除节点,jquery遍历通过内容定位节点

    $(".class1 .class2").each(function (index, item) { var gettedValue = $(item).find(".c ...

  2. JS DOM操作(创建、遍历、获取、操作、删除节点)

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  3. JQuery_DOM 节点操作之复制、替换和 删除节点

    一.复制节点 <script type="text/javascript" src="jquery-1.12.3.min.js"></scri ...

  4. jQuery – 7.动态创建Dom、删除节点

    动态创建Dom节点     1.使用$(html字符串)来创建Dom节点     2.append方法用来在元素的末尾追加元素     案例:动态生成网站列表     3.prepend,在元素的开始 ...

  5. js获取节点的DOM操作

    一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...

  6. 第十四课:js操作节点的插入,复制,移除

    节点插入 appendChild方法,insertBefore方法是常用的两个节点插入方法,具体实现,请看js高级程序设计,或者自行百度. 这里提一下面试时经常会问到的问题,插入多个节点时,你是怎么插 ...

  7. bootstrap jQuery Ztree异步载入数据,check选择&amp;可加入、改动、删除节点

    效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...

  8. JS添加节点方法与JQuery添加节点方法的比较及总结

    原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...

  9. jQuery选择器(添加节点及删除节点及克隆及替换及包装)第九节

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. VS.NET(C#)--1.5_VS菜单功能

    VS菜单功能 文件菜单 1.新建 2.添加 编辑菜单 1.快速查找  ctrl+F 2.快速替换   ctrl+H 3.在文件中查找ctrl+shift+F 4.在文件中替换ctrl+shift+H ...

  2. 解决Vs控制台程序出现NuGet\profile.ps1,因为在此系统上禁止运行脚本错误时或提示:“无法加载文件 \.nuget\packages\Microsoft.EntityFrameworkCore.Tools\1.1.0-preview4-final\tools\init.ps1,因为在此系统上禁止运行脚本”

    1,打开Windows PowerShell 2.输入 set-executionpolicy remotesigned 即可执行脚本 如果执行命令失败的话重新选择Windows PowerShell ...

  3. 链接标签<a>去掉下划线

    1.去掉下划线 text-decoration:none:

  4. 再见 Docker,是时候拥抱下一代容器工具了

    本文首发于:微信公众号「运维之美」,公众号 ID:Hi-Linux. 「运维之美」是一个有情怀.有态度,专注于 Linux 运维相关技术文章分享的公众号.公众号致力于为广大运维工作者分享各类技术文章和 ...

  5. LVS工作原理及集群类型

    Cluster概念 Cluster:集群,为解决某个特定问题将多台计算机组合起来形成的单个系统 Linux Cluster类型: LB:Load Balancing,负载均衡 HA:High ...

  6. python字典添加元素和删除元素

    1. 添加字典元素 方法一:直接添加,给定键值对 #pycharm aa = {'人才':60,'英语':'english','adress':'here'} print(aa) # {'人才': 6 ...

  7. vue项目 npm install 安装依赖 特别慢 解决办法

    使用NPM(Node.js包管理工具)安装依赖时速度特别慢,为了安装Express,执行命令后两个多小时都没安装成功,最后只能取消安装,笔者20M带宽,应该不是我网络的原因,后来在网上找了好久才找到一 ...

  8. LB_Kim

    LB_Kim 搜了一圈发现居然很少有博客说到这个东西, LB_Kim, 就是Kim设计的 下界函数 计算公式: LB_Kim(S,C)=MAX(i=1,2,3,4) d(∮(i)A,∮(i)C) em ...

  9. Java枚举的小例子

    有一次工作中,要根据多个参数确定一个值(车辆事件),确定一个值需要的参数大部分的属性名称是相同的,少部分是独有的,但是参数的值几乎都是不同的: 因为参数太多,if-else写起来就太不优雅了,可以参考 ...

  10. 使用springboot和easypoi进行的数据导出的小案例

    在这个案例中使用的有springboot和easypoi进行数据导出到excel中 yml文件是这样的: server: port: 8080 spring: datasource: url: jdb ...