javascript - 使用 jQuery 动态添加/删除输入字段

Question

我希望使用 Jquery 添加和删除重复的输入字段-

这是我的 HTML:

<div class="col-sm-9">
    <div class="input_wrap">
        <div><input type="text" name="text[]" class="form-control"></div>   

        // **** Here I want to add div using Jquery **** //

        <button class="add_field_button btn btn-info">Add More Subcategory</button>
    </div>
</div>

这是我的 Jquery:

var wrapper         = $(".input_wrap"); 
var add_button      = $(".add_field_button"); 

$(add_button).click(function(e){ 
  e.preventDefault();
  $(wrapper).prepend('<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>'); //add input box
});

当我使用这个 Jquery 时，它总是在 .input_wrap DIV 下面添加 div。但我想将 DIV 添加到我在 HTML 代码中显示的位置。

更新:这是我想要的方式 希望有人可以帮助我。谢谢你。

Answer 1

您可以使用 after 键

var wrapper = $(".input_wrap>div");
var add_button = $(".add_field_button");

$(add_button).click(function (e) {
    e.preventDefault();
    $(wrapper).after('<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>'); //add input box
});

Fiddle

编辑

Fiddle

更新了 fiddle 以包含删除功能

创建了一个新的 Fiddle Demo

我做了一些小改动，最重要的是

var el = $('.input_wrap div:last');

这样基本上会得到最后添加的 div，然后我们将在它之后添加新的 div。

$(el).after(newAdd);