JQuery динамического поля ввода

Question

Я использую этот код для добавления и удаления полей ввода: http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery

Две проблемы, я столкнулся, что я не был в состоянии решить:

$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); 

Я хочу добавить DIV в DIV, как это (я использую самозагрузку):

$(wrapper).append('<div class="form-group"><input type="text" class="form-control" "name="mytext[]" placeholder="test"><div class="input-group"><span class="input-group-addon"><span class="wb-close"></span></span></div></div>'); 

Это работает, очевидно, но тогда моя близкая функция больше не работает, так как он пытается закрыть второй DIV, а не «основной "div (t он <div class="form-group">. Как я могу закрыть весь добавленный div, как в моем примере выше?

Второй вопрос, я использую следующие в моей близкой функции:

<div class="input-group"><span class="input-group-addon"><span class="wb-close"></span></span></div> 

Но кнопка закрытия не работает со значком диапазона wb-close, он просто не будет закрыта. Я попытался добавить класс remove_field к самому диапазону, но это также не сработало.

Answer 1

Вам нужно изменить селектор, потому что вы изменили имя класса.

Попробуйте это:

$(wrapper).on("click", ".wb-close", function(e) { 
    $(this).parent('.form-group').remove(); x--; 
}); 

Или:

$(wrapper).on("click", ".wb-close", function(e) { 
    $(this).parent().parent().parent().remove(); x--; 
}); 

Answer 2

Try this

$(function(){ 
$("#btn-add").click(function(){ 
    $("#wrapper").append('<div><input type="text" name="mytext[]"/><a href="#"    class="remove_field">Remove</a></div>'); 
     $("#wrapper").find("a").unbind("click"); 
    $("#wrapper").find("a").click(function(){ 
     $(this).parent().remove();  
    });  
    }); 
}); 


<button id="btn-add">Add </button> 
<div id="wrapper"></div>