使用 Bootstrap 和 jQuery 实现动态添加和删除输入字段

在 web 开发中，我们经常需要让用户输入一些表单数据，有时候这些数据的数量是不确定的，因此我们需要提供一种动态添加和删除输入字段的方式。在本文中，我们将介绍如何使用 Bootstrap 和 jQuery 实现这一功能。

准备工作

为了使用 Bootstrap 和 jQuery 实现动态添加和删除输入字段，我们需要先引入相应的库文件。你可以从官方网站上下载最新版本的 Bootstrap 和 jQuery，然后将它们引入到你的项目中。

<!-- 引入 Bootstrap 和 jQuery -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

动态添加输入字段

首先，我们来实现动态添加输入字段的功能。我们可以在页面中添加一个按钮，当用户点击这个按钮时，我们会动态添加一个新的输入字段。这个输入字段可以是文本框、下拉框、日期选择器等等，这里我们以文本框为例。

<!-- 添加一个按钮，用于动态添加新的输入字段 -->
<button id="add-input" class="btn btn-primary">添加输入字段</button>

<!-- 这里是用来存放新添加的输入字段的容器 -->
<div id="input-container"></div>

接下来，我们通过监听按钮的点击事件来实现动态添加输入字段的功能。具体实现方法如下所示：

// 监听按钮的点击事件
$('#add-input').click(function() {
    // 新建一个文本框，并添加到 input-container 容器中
    var input = $('<input type="text" class="form-control" name="input[]">');
    $('#input-container').append(input);
});

上面的代码中，我们首先通过 $('<input type="text" class="form-control" name="input[]">') 新建了一个文本框，并指定它的类型为文本框，类名为 form-control，名称为 input[]。然后我们将这个文本框添加到 input-container 容器中，这个容器在上面的 HTML 代码中已经定义好了。

现在，当用户点击 添加输入字段 按钮时，就会动态在页面上添加一个新的文本框了。你可以通过多次点击按钮来添加更多的文本框。

动态删除输入字段

接下来，我们来实现动态删除输入字段的功能。在动态添加输入字段的示例中，我们可以发现每个新添加的输入字段都被包裹在一个 div 中，因此我们可以通过操作这个 div 来实现动态删除输入字段的功能。

首先，我们需要在 div 中添加一个删除按钮。具体实现方法如下所示：

<!-- 添加一个按钮，用于动态删除输入字段 -->
<div class="input-group">
    <input type="text" class="form-control" name="input[]">
    <div class="input-group-append">
        <button class="btn btn-danger remove-input" type="button">删除</button>
    </div>
</div>

上面的代码中，我们在新建的每个文本框 div 中，添加了一个带有 remove-input 类名的按钮 button，并且将它包裹在了一个 input-group-append 容器中，这是为了使删除按钮能够和文本框在同一行显示。

接下来，我们通过监听按钮的点击事件来实现动态删除输入字段的功能。具体实现方法如下所示：

// 监听删除按钮的点击事件
$(document).on('click', '.remove-input', function() {
    // 删除当前文本框的父元素（即包含它的 div 元素）
    $(this).parent().parent().remove();
});

上面的代码中，我们通过 $(document).on('click', '.remove-input', function() {...}) 监听了 remove-input 类名的按钮的点击事件。当用户点击这个按钮时，我们通过 $(this).parent().parent().remove() 来删除当前文本框的父元素，也就是包含它的 div 元素。

现在，我们实现了动态添加和删除输入字段的功能。你可以复制上面的代码到你自己的项目中，然后根据需要修改和定制它们，以满足你的实际需求。