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. java的基本知识导航

    java基本知识 备注:本次主要是思维导图,就是简单的说一下,只会扩展导图中的java关键字,其他以后再写 1.思维导图 2.java关键字 关键字 描述  abstract 抽象方法,抽象类的修饰符 ...

  2. Android7.0 PowerManagerService 之亮灭屏（一）

    本篇从按下power按键后,按键事件从InputManagerService 传到PhoneWindowManager.java开始分析power 按键做屏幕亮灭过程的分析,关于power 按键的其他 ...

  3. BP算法从原理到python实现

    BP算法从原理到实践 反向传播算法Backpropagation的python实现 觉得有用的话,欢迎一起讨论相互学习~Follow Me 博主接触深度学习已经一段时间,近期在与别人进行讨论时,发现自 ...

  4. Web前端学习——JavaScript

    一.JavaScript介绍JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚 ...

  5. EntityFrameworkCore v1.1.1 问题汇总

    随着宇宙第一IDE的最新版本发布[2017/3/7],AspNetCore 和EntityFrameworkCore(团队)都发布了最新的代码. 不过在我看来,这些到还不是最重要的.最重要的是dotn ...

  6. Springboot 使用 JSR 303 对 Controller 控制层校验及 Service 服务层 AOP 校验，使用消息资源文件对消息国际化

    导包和配置 导入 JSR 303 的包.hibernate valid 的包 <dependency> <groupId>org.hibernate.validator< ...

  7. 7、创建ROS msg和srv

    一.msg和srv介绍 msg: msg文件使用简单的文本格式声明一个ROS message的各个域. 仅须要创建一个msg文件,就能够使用它来生成不同语言的message定义代码. srv:srv文 ...

  8. keeplived日志位置指定

    作为一个运维DBA,除了关心数据库的关键指数.还得往架构和底层基础知识多靠拢. 2010年刚工作的时候,那会Cacti监控比較流行吧.可恶的是SNMP会把默认日志写到系统日志文件中面,导致排错时非常受 ...

  9. 一、OpenStack入门 之 初步认识

    OpenStack入门 之 初步认识 写在前面 从 OpenStack 基础知识開始学起,剖析 OpenStack 架构.分析 OpenStack 的各个组件的功能.原理和用法,通过实战演练来掌握 O ...

  10. 自学Zabbix3.9.1-模板Templates-创建

    自学Zabbix3.9.1-模板Templates-创建 1. 模板介绍 模板是一组可以方便地应用于多个主机的实体. 实体可能是: 项目 触发器 图 应用程序 屏幕(因为Zabbix 2.0) 低层次 ...