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

Add/Remove Input Fields Dynamically with jQuery

提问by user3733831

I am looking to add and remove duplicate input fields using Jquery-

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

This is my HTML:

这是我的 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>

This is my Jquery:

这是我的 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
});

When I using this Jquery its always add divbelow the .input_wrapDIV. But I want to add DIVto the place I have shown in my HTML Code.

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

UPDATE:This is the way I want to get Hope somebody may help me out. Thank you.

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

回答by R4nc1d

You can use the afterkey

你可以用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

小提琴

Edit

编辑

Fiddle

小提琴

Updated the fiddle to also include the remove functionallity

更新了小提琴以包括删除功能

Created a new FiddleDemo

创建了一个新的 Fiddle Demo

I made a couple of small changes , the most important one is the

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

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

so that will basically get the last added div and then we will add the new div right after it.

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

$(el).after(newAdd);

回答by murtuzakothawala

check the below jquery code

检查下面的jquery代码

var add_button = $(".add_field_button");

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
        });

回答by Kushal

<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>

Your js

你的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
});

回答by Zee

Change

改变

var wrapper         = $(".input_wrap"); 

to

到

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

and change prependto appendto append in the existing div or afterto place it after the existing div.

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

And I hope it should do, what you want.

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

回答by ozil

you can use insertAfterit require the selectorafter which you want to insert

你可以使用insertAfter它 requireselector之后你想要insert

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

but you need to give another class name to newly created input.
demo

但是您需要为新创建的输入提供另一个类名。
演示

回答by dsharew

How about this:

这个怎么样：

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