正文

学会用jQuery轻松删除表单中的任意一行内容

/0 浏览量
0424

在网页设计中，表单是用户与网站交互的重要方式。当处理表单数据时，有时候我们需要允许用户删除表单中的某些行，比如在一个动态生成的多行输入框中。使用jQuery，我们可以轻松实现这一功能。下面，我将详细介绍如何使用jQuery来删除表单中的任意一行内容。

准备工作

在开始之前，请确保你的网页已经引入了jQuery库。你可以通过以下代码在HTML中引入jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

创建表单

首先，我们需要一个包含多行输入框的表单。以下是一个简单的示例：

<form id="myForm">
    <input type="text" name="item" value="Item 1">
    <button type="button" class="remove-row">Remove</button>
    <hr>
    <input type="text" name="item" value="Item 2">
    <button type="button" class="remove-row">Remove</button>
    <hr>
    <input type="text" name="item" value="Item 3">
    <button type="button" class="remove-row">Remove</button>
</form>

在这个例子中，每行都包含一个文本输入框和一个删除按钮。我们将使用这个删除按钮来移除对应的行。

编写jQuery代码

接下来，我们需要编写jQuery代码来处理删除操作。以下是实现删除功能的代码：

$(document).ready(function() {
    // 为所有具有'class remove-row'的按钮绑定点击事件
    $('.remove-row').click(function() {
        // 获取当前按钮所在的行
        $(this).closest('tr').remove();
    });
});

这段代码中，我们首先在文档加载完成后绑定了一个点击事件到所有具有class remove-row的按钮上。当按钮被点击时，事件处理函数会被触发。在这个函数中，我们使用$(this).closest('tr')来找到当前按钮所在的行（tr元素），然后调用.remove()方法来删除该行。

完整示例

将上述HTML和JavaScript代码结合，我们得到以下完整的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remove Form Row with jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.remove-row').click(function() {
                $(this).closest('tr').remove();
            });
        });
    </script>
</head>
<body>
    <form id="myForm">
        <input type="text" name="item" value="Item 1">
        <button type="button" class="remove-row">Remove</button>
        <hr>
        <input type="text" name="item" value="Item 2">
        <button type="button" class="remove-row">Remove</button>
        <hr>
        <input type="text" name="item" value="Item 3">
        <button type="button" class="remove-row">Remove</button>
    </form>
</body>
</html>

当你运行这个示例并点击任何“Remove”按钮时，对应的行将被删除。这样，你就可以使用jQuery轻松地删除表单中的任意一行内容了。

-- 展开阅读全文 --