追加削除ボタンの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

変更人口フィールド削除ボタンがあります

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