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>

我已经试过许多方式和google搜索，但徒劳无功。

Answer 1

变化的“删除”功能填充的字段

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