jQuery_删除及清空节点

时间：2021-12-13 22:09:33
•remove():从 DOM中删除所有匹配的元素,传入的参数用于根据 jQuery 表达式来筛选元素.  当某个节点用remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.

•empty():清空节点 –清空元素中的所有后代节点(不包含属性节点).

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">

//测试使用 jQuery 删除节点
$(function(){
//1. 为 #city 的每一个 li 添加 click 响应函数: 点击时, li 被删除
//$("#city li").click(function(){
//$(this).remove();
//});

//jQuery 对象的 remove() 方法: 将把 jQuery 对象对应的
//DOM 节点直接删除. 
$("#bj").remove();

//2. 清空 #game 节点
//jQuery 对象的 empty() 方法: 清空 jQuery 对象对应的 
//DOM 对象的所有的子节点. 
alert("要清空了!");
$("#game").empty();
})

</script>

</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li id="se">首尔</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="hello"/>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {

//1. jQuery 对象调用 jQuery 提供的方法的返回值如果是一个对象的话
//那么这个对象一定是一个 jQuery 对象
//2. find() 方法: 查找子节点, 返回值为子节点对应的 jQuery 对象
function removeTr(aNoe) {
//获取 a 节点所在的的 tr 节点. 返回时是 jQuery 对象
var $trNode = $(aNoe).parent().parent();
var textContent = $trNode.find("td:first").text();
textContent = $.trim(textContent);

var flag = confirm("确定要删除" + textContent + "的信息吗?");
if (flag) {
$trNode.remove();
}

return false;
}

$("#employeetable a").click(function() {
return removeTr(this);
});

$("#addEmpButton")
.click(
function() {
$("<tr></tr>")
.append("<td>" + $("#name").val() + "</td>")
.append(
"<td>" + $("#email").val()
+ "</td>")
.append(
"<td>" + $("#salary").val()
+ "</td>")
.append(
"<td><a href='deleteEmp?id=xxx'>Delete</a></td>")
.appendTo("#employeetable tbody").find("a")
.click(function() {
return removeTr(this)
});
});

})
</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>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</tbody>
</table>
</center>

</body>
</html>


标签：

相关文章