Laravel - Кнопка удаления не работает в Dynami c Форма ввода

Question

Я использую динамическую c форму ввода в Laravel -5.8. Кнопка Добавить работает отлично, но кнопка удаления не работает, когда я нажимаю на нее.

Мой код в блейде вида показан ниже:

<table class="table table-bordered">
   <thead>
      <tr>
         <th scope="col">Activity</th>
         <th scope="col">KPI Description</th>
         <th scope="col">Attachment</th>
         <th scope="col"><a class="addRow"><i class="fa fa-plus"></i></a></th>
      </tr>
   </thead>
    <tbody>
       <tr>
           <td><input type="text" name="activity[]" class="form-control qty" ></td>
           <td><input type="text" name="kpi_description[]" class="form-control price" ></td>
           <td>
              <div class="custom-file">
                 <input type="file" name="appraisal_doc[]" class="custom-file-input" id="customFile">
                 <label class="custom-file-label" for="exampleInputFile">Choose file</label>
              </div>
             </td>
           <td><a class="btn btn-danger remove"> <i class="fa fa-remove"></i></a></td>
        </tr>
    </tbody>
</table>

   <script type="text/javascript">
    $(document).ready(function(){
        $('.addRow').on('click', function () {
            addRow();

        });

        function addRow() {
            var addRow = '<tr>\n' +
'  <td><input type="text" name="activity[]" class="form-control activity" ></td>\n' +
'  <td><input type="text" name="kpi_description[]" class="form-control kpi_description" ></td>\n' +
'  <td><div class="custom-file"><input type="file" name="appraisal_doc[]" class="custom-file-input" id="customFile"><label class="custom-file-label" for="exampleInputFile">Choose file</label></div></td>\n' +
'  <td><a   class="btn btn-danger remove"> <i class="fa fa-remove"></i></a></td>\n' +
'   </tr>';
            $('tbody').append(addRow);
        };

        $('.remove').live('click', function () {
            var l =$('tbody tr').length;
            if(l==1){
                alert('you cant delete last one')
            }else{

                $(this).parent().parent().remove();

            }

        });
    });

</script>

Когда я заменил

$ ('. Remove'). Live

на

$ ('. Remove'). На

это позволяет мне удалять только в первый раз. После этого нет ответа. Затем, если я обновлю sh или перезагрузлю страницу, она начнется снова

Где я понял это неправильно и как я могу решить ее?

Спасибо.

Answer 1

используйте приведенный ниже код для элемента c

$(document).on('click','.remove',function(){
    if($('tbody tr').length == 1){
        alert('you cant delete last one')
    } else {
        $(this).parent().parent().remove();
    }
});

Answer 2

Вам необходимо использовать делегирование событий с динамически добавленным HTML. Ваш код:

$('.remove').on('click', function () { ... });

Будет работать только для любых class="remove" элементов , которые присутствуют во время вызова кода.

Если вы хотите настроить таргетинг на существующие классы и любые добавляемые, просто назначьте click logi c родительскому элементу:

$('body').on('click', '.remove', function(){ ... });

Поскольку вы нацеливаетесь на любые .remove классы ниже body, это должен обрабатывать любые динамически добавляемые .remove классы.

См. https://api.jquery.com/on/ для получения полной информации.