javascript - jQuery store div parent id , and delete it from an array -

i trying build input element dynamically option add , remove inputs. have drop down build dynamically data base using php. while adding input sore parent id in array , when delete input using splice delete it. every box adding or remove contain several inputs

i adding inputs array , succeed pass them using ajax, issue when deleting 1 input deleting parents divs in loop.

   var x = 1 var appletestlist; var appleinputlist = new array();  $('#appleplus').click(function(e){ //on add input button click             var wrapper         = $("#appledinamicbox"); //fields wrapper             ; //initlal text box count              $.ajax({             async: false,             type: "get",             url: "sqlfunctrions.php",             data: 'func=dropdownbyvalue&table=test&value=test_id&display=test_name&column=test_type&valueby=apple&selectname=appletest&choosefrom=test',             success: function(msg){                 appletestlist=msg;             }          }); // ajax call              var htmlstring='';                  x++; //text box increment                 htmlstring=htmlstring + '<div class="seperate" id="'+x+'"><div class="col-lg-5"><label>test name:</label>';                  htmlstring = htmlstring + '<select name="appletestname'+x+'" id="appletestname'+x+'" class="form-control"><option value=\"0\">test</option>' +appletestlist+'</select>';                 htmlstring = htmlstring + '</div><div class="col-lg-5"><label>namber of setups</label><input class="form-control" type="text" name="applenumofsetups'+x+'" id="applenumofsetups'+x+'"></div><img src="images/minus-s.png" id="appleminus" class="remove_field"></div>';                 $(wrapper).append(htmlstring); //add input box                              appleinputlist.push(x);                  $(wrapper).on("click",".remove_field", function(e){ //user click on remove text     e.preventdefault(); $(this).parent('div').remove();     var id = $(this).parent().attr('id');     alert(id);     appleinputlist.splice(appleinputlist.indexof(parseint(id)),1);              alert(id);  });  } 

can mistake, there other way that?

thanks, cfir.

the problem bind new $(wrapper).on("click",".remove_field" handler every time clicked on #appleplus (which results in multiple handler calls). move code out of #appleplus click handler.

fiddle.

$('#appleplus').click(function() {     var wrapper = $("#appledinamicbox"); //fields wrapper      ...      appleinputlist.push(x); });  $("#appledinamicbox").on("click", ".remove_field", function(e){ //user click on remove text     e.preventdefault();     $(this).parent('div').remove();     var id = $(this).parent().attr('id');     appleinputlist.splice(appleinputlist.indexof(parseint(id)),1); });