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. 这一次带你彻底了解Cookie

    前言 网络早期最大的问题之一是如何管理状态.简而言之,服务器无法知道两个请求是否来自同一个浏览器.当时最简单的方法是在请求时,在页面中插入一些参数,并在下一个请求中传回参数.这需要使用包含参数的隐藏的 ...

  2. Azure IoT Edge on Raspberry Pi 3 with Raspbian

    在<Azure IoT Edge on Windows 10 IoT Core>一文中,我们以运行Windows 10 IoT Core的MinnowBoard MAX为例,详细讲述了Wi ...

  3. 基于Spring Aop实现类似shiro的简单权限校验功能

    在我们的web开发过程中,经常需要用到功能权限校验,验证用户是否有某个角色或者权限,目前有很多框架,如Shiro Shiro有基于自定义登录界面的版本,也有基于CAS登录的版本,目前我们的系统是基于C ...

  4. MongoDB-Use --auth parameter with connecting error

    When you use mongoDB started as "mongod --dbpath ../../data/db --auth", and you use the ex ...

  5. 反射---hasattr、getattr、setattr、delattr

    class Foo: f = "类的静态变量" def __init__(self,name,age): self.name = name self.age = age def s ...

  6. 使用vee-validate表单插件是如何设置中文提示？

    最近在写vue表单验证的时候,在网上找到一款不错的插件vee-validate,在使用的过程中发现配置不了中文提示,这就很苦恼了,基本上网上的配置办法我都看过,都是有问题的,比如这种 import z ...

  7. NGUI_概述

    序言:这是张三疯第一次开始NGUI插件的学习,刚开始学习,肯定有很多漏洞,后期会及时的补上的. 希望大家可以见谅,希望大佬多多指教. 一.什么是NGUI: NGUI是严格遵循KISS原则并用C#编写的 ...

  8. 【Win 10 应用开发】MIDI 音乐合成——音符消息篇

    在上一篇中,老周介绍了一些乐理知识,有了那些常识后,进行 MIDI 编程就简单得多了.尽管微软已经把 API 封装好,用起来也很简单,但是,如果你没有相应的音乐知识基础,你是无法进行 MIDI 编程的 ...

  9. centos编译安装php5.6.20+nginx1.8.1+mysql5.6.17

    LNMP 代表的就是:Linux系统下Nginx+MySQL+PHP这样的站点服务器架构. 本次实践需求: 实践centos6.5编译安装 LNMP生产环境 架构 web生产环境 使用 xcache ...

  10. 导出Excel1 - 项目分解篇

    我们在全部的MIS系统(信息管理系统)中都能见到他.所以我们把这个通用功能提出来. 项目名称:车辆信息管理系统(中石化石炼) 项目负责人:xiaobin 项目时间:2006.12 - 2007.2 E ...