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. P1629 邮递员送信

    题目描述: 有一个邮递员要送东西,邮局在节点1.他总共要送N-1样东西,其目的地分别是2~N.由于这个城市的交通比较繁忙,因此所有的道路都是单行的,共有M条道路,通过每条道路需要一定的时间.这个邮递员 ...

  2. pku 1401 Factorial 算数基本定理 && 51nod 1003 阶乘后面0的数量

    链接:http://poj.org/problem?id=1401 题意:计算N!的末尾0的个数 思路:算数基本定理 有0,分解为2*5,寻找2*5的对数,2的因子个数大于5,转化为寻找因子5的个数. ...

  3. 在Linux中使用线程

    我并不假定你会使用Linux的线程,所以在这里就简单的介绍一下.如果你之前有过多线程方面的编程经验,完全可以忽略本文的内容,因为它非常的初级. 首先说明一下,在Linux编写多线程程序需要包含头文件p ...

  4. CentOS LNMP环境搭建 各版本

    我们先下载系统包. 以下centos6.5 X64系统 进行演示.本环境适应Centos5.x CentOs6.x Centos7.x    32和64版本.如有错误请回复本文主要安装代码汇总 [PH ...

  5. 网页设计——5.table布局

    今天做一个大的页面,主要是对table布局的理解: 代码: <table cellspacing=0 border=1 style="bordercolor:#C0C0C0;" ...

  6. Codeforces 817F MEX Queries

    题意:对一个维护三种操作:1.将[l..r]中的数全部加入集合中.2.将集合中[l..r]范围内的数删去.3.将集合中在[l..r]中的数删去,并将之前不在集合中的数加入集合 考虑到最近线段树总是写爆 ...

  7. 基于Java使用Snmp4j进行监控与采集(snmptrap、snmpwalk、snmpget)

    之前有在弄监控服务器这块的工作,今天来整体总结下.因为有些服务器(路由器.交换机等都是基于snmp协议的)必须使用snmp协议去监控采集和接收信息,所以必须去了解snmp相关内容,以及如何在基于jav ...

  8. URI和URL差别以及相对路径和绝对路径的差别

    一.URL和URI定义: 1.URL是全球资源定位符的英文所写,您平时上网时在IE浏览器中输入的那个地址就是URL.比方:网易 http://www.163.com就是一个URL. 2.URI是Web ...

  9. WARNING: Re-reading the partition table failed with error 16: Device or resource busy.

    在 mkfs.ext4 /dev/sda2 格式化硬盘空间时,可能出现这种错误. had this situation at office where I was told to re-partiti ...

  10. 两小时搞定C#版超级战舰游戏

    课程简单介绍 游戏开发已然是眼下火星上都非常火的开发技术.而休闲的小游戏超级战舰也是眼下白领中最流行的小游戏.那超级战舰游戏是如何在两个小时高速搞定的呢?休闲类的小游戏高速开发的指南是什么?C#是如何 ...