JavaScript的DOM编程--10--删除节点
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" /> email: <input type="text"
name="email" id="email" /> 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> </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" /> email: <input type="text"
name="email" id="email" /> 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> </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--删除节点的更多相关文章
- JavaScript的DOM编程--11--插入节点
插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...
- JavaScript的DOM编程--05--获取文本节点
获取文本节点: 1). 步骤: 元素节点 --> 获取元素节点的子节点 2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name=" ...
- HTML、css、javascript、DOM编程
HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...
- 轻松学习JavaScript二十二：DOM编程学习之节点操作
DOM编程不只能够查找三种节点,也能够操作节点.那就是创建,插入,删除.替换和复制节点.先来看节点 操作方法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
- JavaScript HTML DOM 元素操作（节点）
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点 ...
- 高性能Javascript(2) DOM编程
第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...
- DOM创建和删除节点
一.创建节点 3步 1.创建空元素对象: var newElem=document.createElement("标签名"); 例如:var a=document.createEl ...
- DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标 ...
- 高性能JavaScript之DOM编程
我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...
随机推荐
- hiho-1015- KMP算法
#1015 : KMP算法 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在 ...
- 使用PHP画统计图的方法
<?php //最后一次修改:2004-6-21 //一个生成矩形图,曲线图的图形分析类 //作者:tonera //说明: //任何人可在任何场合自由使用这个类.但由此所发生的损害跟作者无关. ...
- BP算法从原理到python实现
BP算法从原理到实践 反向传播算法Backpropagation的python实现 觉得有用的话,欢迎一起讨论相互学习~Follow Me 博主接触深度学习已经一段时间,近期在与别人进行讨论时,发现自 ...
- mvc/mvvm小小的总结
mvc/mvvm 阮大神博客 mvc 分为三层,其实M层是数据模型层,它是真正的后端数据在前端js中的一个映射模型,他们的关系是:数据模型层和视图层有映射关系,model改变,view展示也会更改,当 ...
- webrtc视频数据解码处理流程
- 进程组与会话 Linux Process Groups and Sessions
在类Unix系统中,用户通常会跟各种相关的进程打交道.虽然在登录的时候只有一个终端进程(用户对应的登录shell ,通过这个shell启动各种程序和服务),但通常不久以后就会产生许多相关的进程,例如进 ...
- Excel大写和小写转换函数
Excel中的大写和小写转换函数 (1).转换为所有小写字母:lower函数 (2).转换为所有大写字母:upper函数 (3).转换为首字母大写,其余小写字母:proper函数 三种函数的使用方式. ...
- 设计模式 - 装饰者模式(Decorator Pattern) 具体解释
装饰者模式(Decorator Pattern) 具体解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26707033 装饰者 ...
- EasyARM i.mx287学习笔记——通过modbus tcp控制GPIO
0 前言 本文使用freemodbus协议栈,在EasyARM i.mx287上实现了modbus tcp从机. 在该从机中定义了线圈寄存器.当中线圈寄存器地址较低的4位和EasyARM的P2 ...
- IIS 服务或万维网公布服务，或者依赖这 服务可能在启动期间错误发生或者已禁用
作者:jiankunking 出处:http://blog.csdn.net/jiankunking 详细错误信息例如以下: 解决方式: 在服务中禁用下面3个服务自己主动启动: Net.Msmq Li ...