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.

see in action @ jsfiddle.


Comments

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -