Submit button gets disable after deleting tr

Question

My submit button gets disabled after deleting tr from table. I am using bootststrap validation and I am getting this error in firebug:

It's giving me

Type error n is undefined.

When I click on the delete button from actions, the tr is successfully removed, but when I fill in the rest of the fields and click the submit button, the submit button gets disabled.

Here is my HTML:

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
    <div class="row">
        <div class="table-class" id="specialTemplate">
            <table class="table table-bordered">
                <thead>
                    <tr style="text-align: center;">
                        <td style="width:15%">Services</td>
                        <td style="width:15%">Duration</td>
                        <td style="width:15%">Last Price </td>
                        <td style="width:15%">Discount Price </td>
                        <td style="width:15%">Actual Price</td>
                        <td style="width:15%">Action </td>
                    </tr>
                </thead>
                <tbody class="appendSpecial">
                    <?php $duration = array("10mins","20mins","30mins","45mins","1hr","1hr-15mins","1hr-30mins","1hr-45mins","2hrs","3hrs"); ?>
                                                @foreach($specialoffers as $key=> $alloffers)
                    <tr id="s-tr-{{ $alloffers['id'] }}">
                        <input type=hidden name="id[]" value="{{ $alloffers['id'] }}">
                        <td id="s-td-{{$alloffers['id'] }}" >{{ $alloffers['s_name'] }}</td>
                        <td>
                           <div class="time-class">
                               <div class="form-group">
                                   <select class="select-class" name="s_duration[]">
                                       <option value="">Select</option>
                                                                @foreach($duration as $value)

                                       <option>{{$value }}</option>
                                                                @endforeach
                                   </select>
                              </div>
                         </div>
                     </td>
                     <td>
                         <div class="form-group">
                             <input class="form-control" type="text" name="s_lastprice[]" placeholder="Price" >
                        </div>
                     </td>
                     <td>
                         <div class="form-group">
                             <input class="form-control" type="text" name="s_discount[]" placeholder="Discount Price" >
                         </div>
                     </td>
                     <td>
                         <div class="form-group">
                             <input class="form-control" type="text"  name="s_actual[]" placeholder="Actual Price">
                         </div>
                     </td>
                     <td>
                         <div class="btn-del-edit">
                             <button  type="button" rel="{{$alloffers['id'] }}"  class="btn btn-info btn-edit getSpecial" data-toggle="modal" data-target="#myModal-specialedit"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                             <button type="button" id="delete-{{ $alloffers['id'] }}" class="btn btn-danger btn-del deleteSpecial"><i class="fa fa-times" aria-hidden="true"></i></button>
                        </div>
                    </td>
               </tr>
       @endforeach
           </tbody>
       </table>
    </div>
  </div>
</div>

And my jQuery and AJAX:

$(document).on('click','.deleteSpecial', function(){
    var tdid = $(this).attr('id');
    var special = tdid.split('-');
    var id = special[1];
    $.ajax({
        type:"POST",
        url: "delete-special-offer",
        data: { id :id },
        success:function(resp){
            if($.trim(resp) == "success"){
                alert("Deleted Successfully!"); 
                var $template = $('#specialTemplate'),
                $clone    = $template
                $('#sellerProfile')
                .formValidation('addField', $clone.find('[name="s_lastprice[]"]'))
                .formValidation('addField', $clone.find('[name="s_discount[]"]'))
                .formValidation('addField', $clone.find('[name="s_actual[]"]'))
                .formValidation('addField', $clone.find('[name="s_duration[]"]'))
                $("#s-tr-"+id).remove();
            }
            else{
                alert("failed"); return false;
            }
        }
    });
});

Answer 1

in UI which submit button is not working. To delete you can simply use $("#s-tr-"+id).remove();. so what you want to do the below things :-

        var $template = $('#specialTemplate'),
        $clone    = $template
        $('#sellerProfile')
        .formValidation('addField', $clone.find('[name="s_lastprice[]"]'))
        .formValidation('addField', $clone.find('[name="s_discount[]"]'))
        .formValidation('addField', $clone.find('[name="s_actual[]"]'))
        .formValidation('addField', $clone.find('[name="s_duration[]"]'))

because as per console log, it shows error is on form validation fails