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

在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. Spring中bean的管理

    Spring 中常见的容器 我们知道spring容器就是spring中bean的驻留场所.spring容器并不是只有一个.spring自带了多个容器实现,可以归为两种不同的类型:bean工厂和应用上下 ...

  2. Python之(scrapy)爬虫

    一.Scrapy是Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据挖掘.监测和自动化测试. Scrapy吸 ...

  3. 线程三(Mutex)

    C# 中 Mutex 类也是用于线程同步操作的类,例如,当多个线程同时访问一个资源时保证一次只能有一个线程访问资源. 在 Mutex 类中,WaitOne() 方法用于等待资源被释放, Release ...

  4. iftop:Linux流量监测工具

    一.安装须知: (1)iftop 必须以root运行   (2)安装前首先安装:libpcap和libcurses 及包驱动ncurses-devel libpcap-devel (2.1)libpc ...

  5. solr的命令

    Start the Server If you didn’t start Solr after installing it, you can start it by running bin/solr  ...

  6. iOS - 性能优化:Instruments使用简介

    最近采用Instruments 来分析整个应用程序的性能.发现很多有意思的点,以及性能优化和一些分析性能消耗的技巧,小结如下. Instruments使用技巧 关于Instruments官方有一个很有 ...

  7. 【日语】【ZZ】日语人称小结

    [ZZ]日语人称小结 日语中有关人称的词很多,也有不少朋友问 现整理了一下,希望能对那些不太清楚的朋友有点帮助 如果您认为在下有写错的地方,或者您有什么高见,请不吝赐教 第一人称 “我” 1.私 わた ...

  8. Xcode11.1 踩坑备忘录

    Xcode11.1 踩坑备忘录(mac系统10.15) 1 .环信ChatDemo2.0报错 这是环信ChatDemo2.0报错 NSInteger numberOfBeforeSection = [ ...

  9. IDEA提示不区分大小写设置

    File–>Settings–>Editor–>General–>Code Completion–>Mach case的勾取消掉就可以了 取消勾后效果如下

  10. FAILED: SemanticException Unable to determine if hdfs://tmaster:8020/user/root/words.db/test_t2 is encrypted

    使用hive时,建立数据库,建表,写数据: 读数据:select *  from test_t2; 报错SemanticException 原因:建表时使用了其他路径,或者在另一个路径的数据库(建立数 ...