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

在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. 在Windows上安装Redis

    微软官网源码 https://github.com/MicrosoftArchive/redis 这里介绍安装Signed binaries版本 使用Chocolatey(Windows包管理工具)安 ...

  2. day14-python之集合函数字符串格式化

    1.集合 #!/usr/bin/env python # -*- coding:utf-8 -*- # s=set(['alex','alex','sb']) # print(s) # s=set(' ...

  3. dubbo API的使用方式

    本文使用maven方式 1:pom文件 <dependencies> <!-- 引入spring的jar --> <dependency> <groupId& ...

  4. Vue框架之vuex的使用

    1.首先需要在你的项目目录下安装vuex 终端命令: 2.在全局组件中导入与声明vuex 3.创建store实例对象 let store = new Vuex.store({ state:{ }, m ...

  5. Set的交集、差集踩坑记录

    项目中我用到了Set的retainAll和removeAll两个方法取差集和交集. 用法网上都有,我也不展示了. 但是因为我是急着用,直接就照着写了,没想到出大问题了. 因为我的set是一个map的k ...

  6. java--动态代理设计模式,CGLIB实现的动态代理设计模式

    代理设计模式 代理设计模式的基本形式 代理设计模式的核心思路,一个接口两个子类,一个子类完成核心业务操作,另一个完成与核心业务有关的辅助性操作.例如,编写一个简单的设计模式. package com. ...

  7. Oracle前期工具【1】

    目录: 1.oracle下载安装[Oracle11g] 2.Oracle客户端工具下载安装 [sqldeveloper.exe] 3.cmd进入Oracle命令界面操作 4.客户端图形化命令操作 or ...

  8. C#预处理器指令——学习

    若要详细了解如何使用 C# 预处理器指令选择性地编译代码段,请参阅 #define(C# 参考)和 #if(C# 参考). #define(C# 参考) 地址:https://docs.microso ...

  9. IDEA实用教程(二)

    2. 基础设置 1) 进入全局设置 2) 更改主题 3) 修改主题字体 4) 修改代码编辑区字体 5) 修改控制台字体 图中3处修改控制台字体 图中4处修改控制台字体 6) 文件编码的设置 图中4处建 ...

  10. 基于Java+Selenium的WebUI自动化测试框架(九)-----基础页面类(BasePage)

    上篇我们写了java读取xml文件的类,实现了可以从xml文件读取元素的方式.那么,接下来我们需要考虑一个问题.我们拿了这些元素之后怎么去操作呢? 先来看看我们手工测试的时候是怎么进行的. 双击浏览器 ...