CODEWITHSUNDEEP
jquerylaravel
mikefolu
mikefolu

Reputation: 1323

Laravel - Remove button is not working in Dynamic Input Form

I am using dynamic input form in Laravel-5.8. The Add button is working perfectly, but the remove button is not working when I click on it.

My code in the view blade is shown below:

<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>

When I replaced

$('.remove').live

with

$('.remove').on

it only allows me to delete at the first instance. After that no response. Then if I refresh or reload the page it starts again

Where did I get it wrong and how do I get it resolved?

Thanks.

Upvotes: 0

Views: 233

Answers (2)

Sahil Jain
Sahil Jain

Reputation: 471

use below code for dynamic element

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

Upvotes: 1

Tim Lewis
Tim Lewis

Reputation: 29268

You need to use Event Delegation with dynamically appended HTML. Your code:

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

Will only work for any class="remove" elements that are present at the time the code is called.

If you want to target existing classes, and any that are appended, simply assign the click logic to a parent element:

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

As you're targeting any .remove classes that are below body, it should handle any dynamically appended .remove classes.

See https://api.jquery.com/on/ for full details.

Upvotes: 0

Related Questions