Add/Remove Поля ввода динамически с помощью 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 ниже .input_wrap DIV. Но я хочу добавить DIV в место, которое я показал в своем HTML-коде.

UPDATE: Это так, как я хочу, чтобы получить Надежда кто-то может помочь мне. Спасибо.

Answer 1

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

Изменить

var wrapper   = $(".input_wrap"); 

в

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

и изменить prepend к append для добавления в существующий DIV или after, чтобы разместить его после существующего div.

И я надеюсь, что он должен делать то, что вы хотите.

Answer 3

вы можете использовать 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 4

Как об этом:

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

Answer 5

Вы можете использовать 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 функциональность,

создал новую скрипку Demo

Я сделал несколько небольших изменений, наиболее важным из них является

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

так что в основном получите последний добавленный div, а затем мы добавим новый div right af это его.

$(el).after(newAdd); 

Answer 6

проверить код ниже JQuery

вар 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 
     });