1). removeChild(): 从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>删除节点</title>

     <script>

         window.onload=function(){

             var bjNode=document.getElementById("bj");

 //            bjNode.parentNode.removeChild(bjNode);

             var liNodes=document.getElementsByTagName("li");

             for(var i=0;i<liNodes.length;i++){

                 liNodes[i].onclick=function(){

                     var flag=confirm("确定要删除"+this.firstChild.nodeValue+"的信息吗？")

                     if(flag){

                         this.parentNode.removeChild(this);

                     }

                 }

             }

         }

     </script>

 </head>

 <body>

     <p>你喜欢哪个城市?</p>

         <ul id="city"><li id="bj" name="BeiJing">北京</li>

             <li>上海</li>

             <li>东京</li>

             <li>首尔</li>

         </ul>

         <br><br>

         <p>你喜欢哪款单机游戏?</p>

         <ul id="game">

             <li id="rl">红警</li>

             <li>实况</li>

             <li>极品飞车</li>

             <li>魔兽</li>

         </ul>

         <br><br>

         gender:

             <input type="radio" name="gender" value="male"/>Male

             <input type="radio" name="gender" value="female"/>Female

         <br><br>

         name: <input type="text" name="username" value="atguigu"/>

 </body>

 </html>
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     《title>删除节点-例子</title>
     <script type="text/javascript">

         /*

  * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:

  * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的

  * 第一个 td 子节点的文本值, 且要去除前后空格.

  * 2. 若点击 "确认" , 则删除 a 节点的所在的 行

  *

  * 注意:

  * 1. a 节点是一个超级链接, 可以在其 onclick 事件中通过返回 false, 来取消默认行为

  * 2. tr 的直接父节点为 tbody, 而不是 table

  * 3. 可以把去除前后空格的代码写成一个 trim(str) 函数.*/

         window.onload=function(){

         var aNodes=document.getElementById("employeetable").getElementsByTagName("a");

         for(var i=0;i<aNodes.length;i++){

             aNodes[i].onclick=function(){

                 var trNode=this.parentNode.parentNode;

                 var textContent=trNode.getElementsByTagName("td")[0].firstChild.nodeValue;

                 textContent=trim(textContent);

                 var flag=confirm("确定要删除"+textContent+"的信息吗？");

                 if(flag){

                     trNode.parentNode.removeChild(trNode);

                 }

                 return false;

             }

         }

             //除去空格

              function trim(str){

                  var reg = /^\s*|\s*$/g;

                  return str.replace(reg, "");

              }

     }

     </script>

 </head>

 <body>

     <center>

         <br> <br> 添加新员工 <br> <br> name: <input type="text"

             name="name" id="name" />&nbsp;&nbsp; email: <input type="text"

             name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"

             name="salary" id="salary" /> <br> <br>

         <button id="addEmpButton" value="abc">Submit</button>

         <br> <br>

         <hr>

         <br> <br>

         <table id="employeetable" border="1" cellpadding="5" cellspacing=0>

             <tbody>

                 <tr>

                     <th>Name</th>

                     <th>Email</th>

                     <th>Salary</th>

                     <th>&nbsp;</th>

                 </tr>

                 <tr>

                     <td>a</td>

                     <td>a@tom.com</td>

                     <td>5000</td>

                     <td><a href="deleteEmp?id=001">删除</a></td>

                 </tr>

                 <tr>

                     <td>

                         b

                     </td>

                     <td>b@sohu.com</td>

                     <td>8000</td>

                     <td><a href="deleteEmp?id=002">删除</a></td>

                 </tr>

                 <tr>

                     <td>c</td>

                     <td>c@tom.com</td>

                     <td>10000</td>

                     <td><a href="deleteEmp?id=003">删除</a></td>

                 </tr>

                 <tr>

                     <td>d</td>

                     <td>d@tom.com</td>

                     <td>10000</td>

                     <td><a href="deleteEmp?id=003">删除</a></td>

                 </tr>

                 <tr>

                     <td>f</td>

                     <td>f@tom.com</td>

                     <td>10000</td>

                     <td><a href="deleteEmp?id=003">删除</a></td>

                 </tr>

             </tbody>

         </table>

     </center>

 </body>

 </html>
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>删除添加节点-例子</title>

     <script type="text/javascript">

 /*

  为 #addEmpButton 添加 onclick 响应函数:

  * 1. 获取 #name, #email, #salary 的文本框的值

  * 2. 利用 1 获取的文本值创建 3 个 td 节点, 在创建一个 tr 节点. 并把以上的 3 个 td

  *    节点价位 tr 节点的子节点

     <tr>

         <td>Tom</td>

         <td>tom@tom.com</td>

         <td>5000</td>

     </tr>

  * 3. 在创建一个 td 节点: <td><a href="deleteEmp?id=xxx">Delete</a></td>

  * 4. 把 3 创建的 td 也加为 tr 的子节点.

  * 5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点.

  * 6. 为新创建的 tr 的 a 子节点添加 Onclick 响应函数, 使其也具备删除的功能.

  *

  *

  */    window.onload=function(){

         //定义个删除方法

        function removeTr(aNode){

                 var trNode=aNode.parentNode.parentNode;

                 var textContent=trNode.getElementsByTagName("td")[0].firstChild.nodeValue;

                 textContent=trim(textContent);

                 var flag=confirm("确定要删除"+textContent+"的信息吗？");

                 if(flag){

                     trNode.parentNode.removeChild(trNode);

                 }

                 return false;

             }

                     //点击添加按钮，提交信息到表格里

             document.getElementById("addEmpButton").onclick=function(){

             //获取输入信息后的表单的值

                 var nameVal=document.getElementById("name").value;

                 var emailVal=document.getElementById("email").value;

                 var salaryVal=document.getElementById("salary").value;

             //创建TD 并向其中添加文本值

                 var nameTd=document.createElement("td");

                 nameTd.appendChild(document.createTextNode(nameVal));

                 var emailTd=document.createElement("td");

                 emailTd.appendChild(document.createTextNode(emailVal));

                 var salaryTd=document.createElement("td");

                 salaryTd.appendChild(document.createTextNode(salaryVal));

             //创建tr

                 var tr=document.createElement("tr");

             //向tr中添加td

                 tr.appendChild(nameTd);

                 tr.appendChild(emailTd);

                 tr.appendChild(salaryTd);

             //创建a

                 var aNode=document.createElement("a");

                 aNode.href="deleteEmp?id=xxx";

                 aNode.appendChild(document.createTextNode("删除"));

                 var aTd=document.createElement("td");

                 aTd.appendChild(aNode);

                 tr.appendChild(aTd);

                 aNode.onclick=function(){

                      removeTr(this);

                     return false;

                 }

             //把tr添加到表格中

                 document.getElementById("employeetable").getElementsByTagName("tbody")[0].appendChild(tr);

             }

             //除去空格

              function trim(str){

                  var reg = /^\s*|\s*$/g;

                  return str.replace(reg, "");

              }

             //表格中原有的信息 点击后也删除

             var aNodes = document.getElementById("employeetable")

                           .getElementsByTagName("a");

                  for(var i = 0; i < aNodes.length; i++){

                      aNodes[i].onclick = function(){

                          removeTr(this);

                          return false;

                      }

                  }

     }

     </script>

 </head>

 <body>

     <center>

         <br> <br> 添加新员工 <br> <br> name: <input type="text"

             name="name" id="name" />&nbsp;&nbsp; email: <input type="text"

             name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"

             name="salary" id="salary" /> <br> <br>

         <button id="addEmpButton" value="abc">Submit</button>

         <br> <br>

         <hr>

         <br> <br>

         <table id="employeetable" border="1" cellpadding="5" cellspacing=0>

             <tbody>

                 <tr>

                     <th>Name</th>

                     <th>Email</th>

                     <th>Salary</th>

                     <th>&nbsp;</th>

                 </tr>

                 <tr>

                     <td>a</td>

                     <td>a@tom.com</td>

                     <td>5000</td>

                     <td><a href="deleteEmp?id=001">删除</a></td>

                 </tr>

                 <tr>

                     <td>

                         b

                     </td>

                     <td>b@sohu.com</td>

                     <td>8000</td>

                     <td><a href="deleteEmp?id=002">删除</a></td>

                 </tr>

                 <tr>

                     <td>c</td>

                     <td>c@tom.com</td>

                     <td>10000</td>

                     <td><a href="deleteEmp?id=003">删除</a></td>

                 </tr>

                 <tr>

                     <td>d</td>

                     <td>d@tom.com</td>

                     <td>10000</td>

                     <td><a href="deleteEmp?id=004">删除</a></td>

                 </tr>

                 <tr>

                     <td>f</td>

                     <td>f@tom.com</td>

                     <td>10000</td>

                     <td><a href="deleteEmp?id=005">删除</a></td>

                 </tr>

             </tbody>

         </table>

     </center>

 </body>

 </html>

JavaScript的DOM编程--10--删除节点的更多相关文章

  1. JavaScript的DOM编程--11--插入节点

    插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...

  2. JavaScript的DOM编程--05--获取文本节点

    获取文本节点: 1). 步骤: 元素节点 --> 获取元素节点的子节点 2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name=" ...

  3. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  4. 轻松学习JavaScript二十二：DOM编程学习之节点操作

    DOM编程不只能够查找三种节点,也能够操作节点.那就是创建,插入,删除.替换和复制节点.先来看节点 操作方法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  5. JavaScript HTML DOM 元素操作（节点）

      在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点 ...

  6. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  7. DOM创建和删除节点

    一.创建节点 3步 1.创建空元素对象: var newElem=document.createElement("标签名"); 例如:var a=document.createEl ...

  8. DOM创建和删除节点、HTML DOM常用对象[转]

    创建和删除节点:——核心DOM   1. 创建单个元素节点:3步:      1. 创建空元素节点对象:         var elem=document.createElement("标 ...

  9. 高性能JavaScript之DOM编程

    我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...

随机推荐

  1. zzuli 2131 Can Win dinic+链式前向星（难点：抽象出网络模型+建边）

    2131: Can Win Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 431  Solved: 50 SubmitStatusWeb Board ...

  2. 如何利用panel在一个窗口中实现诸多页面的显示

    Book_register form11 = new Book_register();//new一个对象 form11.TopLevel = false;//去除子窗体的顶级窗体设置 form11.P ...

  3. ArcGIS jsAPI (4.x)本地部署字体符号乱码

    在下载了新版arcigs 的 JS API 后,每次部署在IIS中都会出现部件字体乱码的问题,需配置响应标头和添加文件映射 一. HTTP响应标头配置 在 IIS 中的 HTTP响应标头 中加入以下配 ...

  4. Hashtable 小记

    Hashtable 是 JDK 中较早的数据结构了,目前已不再推荐使用了.但抱着学习的目的,还是看了下它的实现. 简介 Hashtable,顾名思义即哈希表,是一种经典的数据结构.其基本结构是一个数组 ...

  5. ListView原理

    表明转载自http://blog.csdn.net/iispring/article/details/50967445 在自己定义Adapter时,我们经常会重写Adapter的getView方法,该 ...

  6. SSRS Fields cannot be used in page headers or footers

    问题环境:SSRS 2005 报表开发 尝试在Page Header中使用Data Set的字段,遇到以下的错误: The value expression for textbox '' refers ...

  7. Python源代码剖析笔记3-Python运行原理初探

    Python源代码剖析笔记3-Python执行原理初探 本文简书地址:http://www.jianshu.com/p/03af86845c95 之前写了几篇源代码剖析笔记,然而慢慢觉得没有从一个宏观 ...

  8. 掀起Azure AD的盖头来——深入理解Microsoft Graph应用程序和服务权限声明

    作者:陈希章 发表于 2017年7月12日 引子 这是一篇计划外的文章.我们都知道要进行Microsoft Graph的开发的话,需要进行应用程序注册.这个在此前我已经有专门的文章写过了.但这里存在一 ...

  9. 一 、Spring Boot 学习之项目搭建

    一.简介 spring 官方网站本身使用Spring 框架开发,随着功能以及业务逻辑的日益复杂,应用伴随着大量的XML配置文件以及复杂的Bean依赖关系. 随着Spring 3.0的发布,Spring ...

  10. [.Net跨平台]部署DTCMS到Jexus遇到的问题及解决思路--验证码

    上一篇博客我们已经基本完成了部署工作,目前发现了验证码出现500错误,分析其代码,我们可以看到验证码使用的是System.Drawing命名空间下的类库, GDI+ 位图,这个在肯定是平台相关的,所以 ...