Question

I have a form with select fields dynamically generated and with the options taken from php (same for all the selects). The “add” button is working but the “remove” button is not working perfectly, it´s not deleting everything and if you add again, it goes below the ideal position.

This is the code that I have:

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

And this is the html code generated by select.php:

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

Answer 1

As the other 2 answers said, the problem is:

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

Change it to:

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

To match how the wrap-div was created.

See it in action at jsFiddle.