jQuery для кнопки добавления-удаления не работает

Question

Для одного из моих клиентов я разработал форму запроса в соответствии с потребностями. Вводимые данные могут быть кратными, для которых я разработал динамическую форму, чтобы строки могли быть увеличены или уменьшены. Кнопка добавления в форме работает нормально, но кнопка удаления не работает.

Пожалуйста, проверьте DEMO и код приведен ниже.

$(document).ready(function() { 
 
    var max_fields = 10; //maximum input boxes allowed 
 
    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
 
    var add_button = $(".add_field_button"); //Add button ID 
 

 
    var x = 1; //initlal text box count 
 
    $(add_button).click(function(e) { //on add input button click 
 
    e.preventDefault(); 
 
    if (x < max_fields) { //max input box allowed 
 
     x++; //text box increment 
 
     $(wrapper).append('<div><input type="text" class="i" name="sl[]"><input type="text" class="l" name="item[]"><input type="text" class="j" name="unit[]"><input type="text" class="j" name="qty[]"/>&nbsp;<a href="#" class="remove_field">X</a></div>'); 
 

 
     //add input box 
 
    } 
 
    }); 
 

 
    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text 
 
    e.preventDefault(); 
 
    $(this).parent('div').remove(); 
 
    x--; 
 
    }) 
 
}); 
 
    
 
$(document).ready(function() { 
 
    $(".datepicker").datepicker({ 
 
    dateFormat: 'dd-M-yy' 
 
    }); 
 
});

.k input { 
 
    width: 95px; 
 
    margin: 2px; 
 
} 
 
.i { 
 
    width: 40px; 
 
    margin: 3px; 
 
    text-align: center; 
 
} 
 
.l { 
 
    width: 390px; 
 
    margin: 3px; 
 
    text-align: left; 
 
} 
 
.j { 
 
    width: 95px; 
 
    margin: 3px; 
 
    text-align: center; 
 
} 
 
.m { 
 
    padding: 10px; 
 
    margin: 5px; 
 
    font-weight: bold; 
 
    line-height: 25px; 
 
}

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
 

 
<form method="post" action="xxx/enq.php"> 
 
    <label>Name:</label> 
 
    <input type="text" name="com" /> 
 
    <label>Required at:</label> 
 
    <input type="text" name="req2" /> 
 
    <label>Location:</label> 
 
    <input type="text" name="place" /> 
 
    <label>Required Dt:</label> 
 
    <input type="text" name="req1" class="datepicker" /> 
 

 
    <div class="input_fields_wrap"> 
 
    <table> 
 
     <tr> 
 
     <td class="i">SL</td> 
 
     <td class="l">ITEM DESCRIPTION</td> 
 
     <td class="j">UNIT</td> 
 
     <td class="j">QTY</td</tr> 
 
    </table> 
 
    <input type="text" class="i" name="sl[]"> 
 
    <input type="text" class="l" name="item[]"> 
 
    <input type="text" class="j" name="unit[]"> 
 
    <input type="text" class="j" name="qty[]"> 
 
    <button class="add_field_button">+</button> 
 
    </div> 
 

 
    <input type="submit" name='submit' onclick="show_confirm()" value="SUBMIT"> 
 
    <input type="reset" value="CLEAR"> 
 
</form>

Я попытался в числе путей и гугле, но тщетно.

Answer 1

Измените JS на «удалить» функциональность заполненного поля

$(body).on("click", ".remove_field", function(e) { //user click on remove text 
e.preventDefault(); 
$(this).parent('div').remove(); 
x--; 
})