我正在尝试使用 jquery 添加动态输入字段。
所以我有以下代码
我的 HTML 代码:
<div class="col-12 col-md-12 col-xl-8 col-left">
<div class="card mb-4 ">
<div class="card-body ">
<button type="button" class="btn btn-outline-primary mb-1 add_new_frm_field_btn">Ajouter un nouveau casting</button>
</br>
</br>
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row ">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我正在使用以下脚本动态添加和删除输入字段
<script type="text/javascript">
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(
`
<div class="col-12">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select name="id_casting" id="id_casting" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<!-- <div class="card mb-4"> -->
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1">Annuler</button>
<!-- <button class="btn_round remove_node_btn_frm_field" title="Copy or clone this row">
<i class="fas fa-copy"></i>
</button>
<button class="btn_round remove_node_btn_frm_field" disabled>
<i class="fas fa-trash-alt"></i>
</button> -->
</div>
<!-- </div> -->
</div>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
$(document).ready(function(){
//===== delete the form fieed row
$("body").on("click", ".remove_node_btn_frm_field", function () {
console.log("click");
$(this).closest(".form_field_outer_row").remove();
console.log("success");
});
});
</script>
问题是当我点击 delete button
时,它只适用于第一行,它删除了第一行但不适用于其他行。
我的脚本有什么问题?
如果您有任何想法,请帮助我
提前致谢