使用带有 Bootstrap 的 jQuery 动态添加删除输入字段

在本节中，我们将学习如何从表单中动态添加和删除输入字段。我们将使用 Bootstrap 和 JQuery 来实现这一点。在下面的示例中，我们不仅会提供一个添加按钮来添加多个输入字段，还会为每个输入字段提供一个删除按钮。用户可以使用此按钮随时删除他们不想要的任何字段。我们还将使用 Bootstrap，这将帮助我们提供一个非常有吸引力和漂亮的布局。

在下面的 JQuery 示例中，我们将添加两个点击事件，如下所述：

Add-more Class：这个类将用于编写 JQuery 的追加代码。

Remove Class：这个类将用于删除输入字段。

在我们的示例中，通过添加“copy”类 div，我们还将追加“after-add-more”类。如果我们想改变“copy”类中的图标、文本或其他任何内容，我们可以通过使用这个追加类“after-add-more”轻松地做到这一点。以下示例非常简单。

在此示例中，我们还将创建两个文件。第一个文件将命名为 index.php，我们将使用它通过生成脚本代码来添加更多输入字段。第二个文件将命名为 action.php，我们将使用它来获取动态字段的值。

index.php

action.php

使用此文件，我们可以获取多个输入字段的值，如下所示：

现在我们上面的代码已准备好运行。当我们运行它时，将生成以下输出