JavaScript表单的删除与增加（使用jQuery）_script函数删除整个表单的代码-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40084390/article/details/90315833

本文介绍了如何使用jQuery进行JavaScript表单的删除和增加操作。重点讲解了在删除表单时，通过事件委托确保添加的数据也能被删除，并强调了在添加数据时，若数据包含引号，需注意引号类型以避免脚本错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、代码

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.delete {
				text-decoration: none;
			}
		</style>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function() {
				//清空列表
				$("#empty").on("click", function() {
					$("#tbd").empty();
				});
				//删除数据
				$("#tbd").on("click",".delete", function() {
					$(this).parent().parent().remove();
				});
				//添加数据
				$("#add").on("click", function() {
					$("<tr><td>1004</td><td>慧慧4</td><td>20</td><td><a href='#' class='delete'>删除</a></td></tr>").appendTo("#tbd");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" name="" id="add" value="添加" />
		<input type="button" name="" id="empty" value="清空" />
		<table>
			<thead id="thd">
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>删除</th>
				</tr>
			</thead>
			<tbody id="tbd">
				<tr>
					<td>1001</td>
					<td>慧慧1</td>
					<td>20</td>
					<td><a href="#" class="delete">删除</a></td>
				</tr>
				<tr>
					<td>1002</td>
					<td>慧慧2</td>
					<td>20</td>
					<td><a href="#" class="delete">删除</a></td>
				</tr>
				<tr>
					<td>1003</td>
					<td>慧慧3</td>
					<td>20</td>
					<td><a href="#" class="delete">删除</a></td>
				</tr>
				<tr>
					<td>1004</td>
					<td>慧慧4</td>
					<td>20</td>
					<td><a href="#" class="delete">删除</a></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

二、删除表单时，使用委托（选择器），才能使添加的数据也具备删除的能力

on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

//删除数据
	$("#tbd").on("click",".delete", function() {
		$(this).parent().parent().remove();
	});

此时.delete 把删除的能力委托给它的上级，每次由他的上级进行判断，
注意：此时的this指代的仍为.delete

三、添加表单数据时，

如果插入的表单数据由双引号包含后，里面的数据就不能使用双引号，必须使用单引号，否则会出错，并使前面的脚本也不能运行（因为JavaScript脚本运行时，是整体运行）

//添加数据
				$("#add").on("click", function() {
					$("<tr><td>1004</td><td>慧慧4</td><td>20</td><td><a href='#' class='delete'>删除</a></td></tr>").appendTo("#tbd");
				});