Динамически удаляйте выбранные поля формы внутри div с данными, взятыми из php

Question

У меня есть форма с динамически генерируемыми полями выбора и опциями, взятыми из php (одинаково для всех вариантов выбора). Кнопка «Добавить» работает, но кнопка «Удалить» не работает идеально, она не удаляет все, и если вы добавите снова, она опустится ниже идеальной позиции.

Это код, который у меня есть:

<script type="text/javascript">
//<![CDATA[ 
$(function(){
var counter = 1;

$("#addButton").click(function () {

if(counter>10){
        alert("Only 10 textboxes allow");
        return false;
}   

var select = $('<select>').attr({id:'select'+counter,name:'select'+counter});

$.ajax({
url: 'selects.php',
dataType: "html",
success: function(data) {
select.html(data);
}
});        

select.appendTo("#TextBoxesGroup");
$("#TextBoxesGroup > select").wrap ( function () {
return '<div id="wrap_' + this.id + '"></div>';
} ); 
counter++;
});

$("#removeButton").click(function () {
 if(counter==1){
      alert("No more textbox to remove");
      return false;
 }   

 counter--;

     $("#wrap_" + counter).remove();
     $("#select" + counter).remove();

 });

});
//]]> 
</script>

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
    <label>Textbox #1 : </label><input type='text' id='textbox1' >
</div>
<div id="TextBoxDiv2">
    <label>Textbox #2 : </label><input type='text' id='textbox2' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>

И это HTML-код, сгенерированный select.php:

<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
<option value="4">Cuatro</option>

Answer 1

проблема идентифицирует это, когда вы возвращаете

return '<div id="wrap_' + this.id + '"></div>'  

this.id является идентификатором выбора

но при удалении

 $("#wrap_" + counter).remove();

попробуй удалить по

  $("#wrap_select" + counter).remove();

потому что идентификатор вашего div

wrap_select+'some value' not wrap_+'some value'

Answer 2

Как и в двух других ответах, проблема заключается в следующем:

$("#wrap_" + counter).remove();

Измените его на:

$("#wrap_select" + counter).remove ();

Чтобы соответствовать способу создания wrap-div.

См. Это в действии на jsFiddle.

Answer 3

Селекты получают идентификатор 'select'+counter, а упаковщики получают идентификатор 'wrap_' + this.id, а this.id, если я не слишком усталый по утрам, не такой же, как счетчик.

И так как вы делаете это

 $("#wrap_" + counter).remove();
 $("#select" + counter).remove();

Вы не удаляете упаковщик.

---