jquery - Dynamically remove select form fields inside divs with data taken from php -
i have form select fields dynamically generated , options taken php (same selects). "add" button working "remove" button not working perfectly, it´s not deleting , if add again, goes below ideal position.
this code 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 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 html code generated select.php:
<option value="1">uno</option> <option value="2">dos</option> <option value="3">tres</option> <option value="4">cuatro</option>
as other 2 answers said, problem is:
$("#wrap_" + counter).remove();
change to:
$("#wrap_select" + counter).remove ();
to match how wrap-div created.
Comments
Post a Comment