Question

我想允许用户在我提供给他们的格式内动态创建任意数量的输入字段。我需要以下功能：

应该有一个添加更多字段的按钮
每个字段旁边应有一个按钮，以删除该字段

有什么方法可以满足我的需求？

我已经在JavaScript中使用了append()方法，但无法使用其旁边的按钮删除字段。

单击按钮：

$( '#some_div' ).append( '<input type="text" name="tel[]" class="form-control">' );

我听说了有关grids的一些信息，但是找不到任何相关的信息。

Answer 1

append()将用于添加字段。要减去字段，您可以使用remove()。

执行此操作的一种可能方法是将字段和删除按钮包装在div中，从而很容易将整个组作为删除目标。 jQuery的closest()相对于您要搜索的位置，在与您的搜索匹配的DOM中找到最接近的元素。

$("#add-field").click(function() {
  $("#some_div").append('<div class="input-block"><input type="text" name="tel[]" class="form-control"><input type="button" class="remove-field" value="-"></div>');
});

$(document).on("click", ".remove-field", function() {
  $(this).closest(".input-block").remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" id="add-field" value="+ Add Field">
<div id="some_div"></div>

创建多值字段

1 个答案: