Блог

Я пытаюсь динамически добавлять поля ввода с помощью 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 нее, она работает только для первой строки, она удаляет первую строку, но не работает для других строк .

Что не так с моим сценарием ?

Если у вас есть какие-либо идеи, помогите мне

Заранее спасибо