使用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时，它总是在div DIV下面添加.input_wrap。但我想将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

更新了小提琴，还包括remove functionallity

创建了一个新的小提琴 Demo

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

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

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

$(el).after(newAdd);

Answer 2

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

        <div class="more-data"></div> 

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

你的js

var wrapper         = $(".input_wrap"); 
var add_button      = $(".add_field_button"); 
var moredata      = $(".more-data"); 

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

Answer 3

更改

var wrapper         = $(".input_wrap"); 

到

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

并将prepend更改为append以附加到现有div或after以将其放在现有div之后。

我希望它应该做，你想要的。

Answer 4

检查以下jquery代码

var add_button = $（“。add_field_button”）;

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

Answer 5

您可以insertAfter使用selector后需要insert

var newElement='<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>';
$(newElement).insertAfter(".form-control");  

但你需要为新创建的输入提供另一个类名 demo

Answer 6

这个怎么样：

$('<div><input type="text" name="text[]" class="form-control">
<a href="#" class="remove_field">Remove</a>    
</div>').insertAfter($(wrapper).find("div")[0])