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. Linux中nginx手动安装

    本分类下有一个环境一键安装.那这背后发生了什么呢?咱们手动使用源码进行安装. 1.首先保证有一个能联网的centos. 2.百度 ningx 官网   点download  http://nginx. ...

  2. 给dalao们递dalao们的博客

    hqh使用0 1敲完AC代码 FNXF FNXF tfx .io结尾的都是dalao! ssttkkl 复读:.io结尾的都是dalao! ThetaS Pirote YanQuijote 昵称不能为 ...

  3. js+画曲线和圆 并限制圆的渲染范围

    通过三个点的坐标可确定一条双曲线. 公式: 1)y=ax^2+bx+c; 2) y=a(x-k)+h; 通过已知三点可确定a,b,c,h,k 2.通过圆心坐标(a,b)和半径r可确定一个圆,和已知的x ...

  4. GET方式提交中文编码问题以及三种解决方式

    GET方式提交在WEB中是非常常用的方式,有时候我们在使用GET方式提交请求不得不提交中文,但是TOMCAT等容器对于GET方式的编码问题总是让人折腾. 先说说流程吧: 我们的内容使用GET方式发送, ...

  5. 《RabbitMQ Tutorial》译文 第 5 章 主题

    原文来自 RabbitMQ 英文官网的教程(5.Topics),其示例代码采用了 .NET C# 语言. In the previous tutorial we improved our loggin ...

  6. [每天一个Linux小技巧]　强制让内核按单核模式启动

    在启动參数里追加 nosmp nosmp的说明例如以下: nosmp [SMP] Tells an SMP kernel to act as a UP kernel, and disable the ...

  7. 如何通过PowerShell获取Office 365 TenantID

    作者:陈希章 发表于2017年5月31日 安装Azure Powershell 模块 Installing the Azure PowerShell Service Management module ...

  8. 【转载】JAVA中综合接口和抽象类实现的一种“抽象接口”

    Muscleape个人总结:(这里的抽象接口是指:使用一个抽象类实现一个接口,是两部分结构) 使用一个抽象类直接实现接口,将接口中的方法区分为实现类必须要实现的和选择性实现的,其他需要实现接口的类型通 ...

  9. docker学习笔记（一）

    docker是一种容器技术,现在火的一塌糊涂,最近公司打算用docker统一开发.测试.预上线.上线环境,所以花了时间研究一下. docker是一种容器技术,之前是基于LXC容器,现在已经改成基于li ...

  10. 《ActiveMQ in Action》【PDF】下载

    内容介绍TheApache ActiveMQ message broker is an open source implementation ofthe Java Message Service sp ...