nested form fields are not deleting when i click on remove link, but the updating the fields and adding new fields is working(in ruby on rails)

Question

i am having the models Approval , Approver . and the association between them is Approval has many Approvers . here i am using the nested form. to create an Approval Process along with their Approvers . here when i Add new Approvers in edit form its working Fine. and when i change the existing values its changing properly in edit form. but when i delete these nested fields by clicking remove link the fields are getting dissappered. upto here fine. after removing the fields when i click update, the fields are not getting deleted.

<%= nested_form_for(@approval , html: {:class => 'form-inline'}) do |f| %>

   <div class="col-md-7"> 
     <div class="field">
       <%= f.label :name, "Assign a name to this approval process." %></br>
       <%= f.text_field :name,:class => 'form-control' %></br></br>
    </div>


    <div class="field">
      <%= f.label :for, "This approval process will be be applicable to which claim form?" %>
      <%=f.select :for, ["Regularize Attendance", "Leave Request", "Daily Expense Claim ", "Travel Expense Claim"],  {:prompt=>"Select One"}, {:class => 'form-control' }   %></br></br>

    </div>

    <div class="field">

      <%= f.label :sequential, "Does this process involve sequential or non-sequential approvals?" %>
      <%=f.select :sequential, ["Sequential", "Non-Sequential"],  {:prompt=>"Select One"}, {:class => 'form-control' }   %>
      <br><br>

    </div>

    <%= f.fields_for :approvers do |approver| %>

    <div class="field">

    <%= approver.label :approver_type,"Approver"  %>
    <%= approver.select :approver_type, ["Role", "Specific User"],  {}, {:class => 'form-control role_select', :onchange => "$.fn.myFunc(this);" } %></br></br>

    </div> 

    <div class="field">

      <%= approver.label :approver_value,"Role"  %>
      <%= approver.select :approver_value, [ "HR Manager", "Reporting Manager"], {}, {:class => 'form-control appr_select' } %>
      <%= approver.text_field :approver_value, style: 'display:none',:class => 'form-control inpt_specific_user',:disabled => "true"  %>
      <%= approver.link_to_remove "Remove", :class=>"" %> </br></br>
    </div>

    <% end %>
    <%= f.link_to_add "Add Approvers", :approvers,:class=>"" %></br>

   </div>


 <div class="col-md-7"> 

  </br>
    <%= f.submit "Save", :class=>"btn btn-primary" %>&nbsp;&nbsp;

 </div>
  <br>
<% end %>

here by default approver_type field will show as role and accordingly iam showing the approver_value field as dropdown(by hiding the approver_value textbox). and when the user changes approver_type to specific user then iam showing the approver_value field as textbox to enter the specific person name(by hiding the approver_value field dropdown).for this, this is the javascript i wrote:

 $.fn.myFunc = function (button) {  
     alert("in actual");
     var $nextDiv = $(button).closest('div.field') // get closest parent field
                            .next('div.field') // get next parent field
     $nextDiv.find('label') // find label
             .text(button.value); 

    if(button.value  == 'Role'){
        $nextDiv.find('select').show();
        $nextDiv.find('select').removeAttr( "disabled" )
        $nextDiv.find('input').hide();
        $nextDiv.find('input').attr("disabled", "disabled");  
    } 

    if (button.value =="Specific User"){
        $nextDiv.find('input').show(); 
        $nextDiv.find('input').removeAttr( "disabled" )
        $nextDiv.find('select').hide();
        $nextDiv.find('select').attr("disabled", "disabled");                   
    }
    }


$( document ).ready(function() {
    $("select.role_select").each(function(){
       var $this = $(this);
       var $nextDiv = $this.closest('div.field') // get closest parent field
                            .next('div.field') // get next parent field
    alert("YYYYYYYYYYYYYYYYYYYYYYYY"); 
    alert($this);
    alert($this.val());

       if($this.val()  == 'Role'){
        $nextDiv.find('select').show();
        $nextDiv.find('select').removeAttr( "disabled" )
        $nextDiv.find('input').hide();
        $nextDiv.find('input').attr("disabled", "disabled");  
    } 

    if ($this.val() =="Specific User"){
        $nextDiv.find('input').show(); 
        $nextDiv.find('input').removeAttr( "disabled" )
        $nextDiv.find('select').hide();
        $nextDiv.find('select').attr("disabled", "disabled");                   
    }

      });

});

and when when i delete the fields which is having Approver_type dropdown value as "specific user" then the deletion is working fine.

this is the output in terminal:

Started PATCH "/approvals/fYtVHpl_3zqTskQtnmedWw%253D%253D" for 127.0.0.1 at 2015-09-02 12:24:09 +0530
Processing by ApprovalsController#update as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"/lQfQRUhE8jmhSitAMkDx+bWMKLZilP29PQXGI82YaY=", "approval"=>{"name"=>"attendance", "for"=>"Regularize Attendance", "sequential"=>"Non-Sequential", "approvers_attributes"=>{"0"=>{"approver_type"=>"Role", "approver_value"=>"Reporting Manager", "id"=>"13"}, "1"=>{"approver_type"=>"Specific User", "approver_value"=>"john", "_destroy"=>"1", "id"=>"14"}}}, "commit"=>"Save", "id"=>"fYtVHpl_3zqTskQtnmedWw%3D%3D"}

but when i delete the fields which is having Approver_type dropdown value as "role" then it is not deleting.

Started PATCH "/approvals/fYtVHpl_3zqTskQtnmedWw%253D%253D" for 127.0.0.1 at 2015-09-02 12:32:15 +0530
Processing by ApprovalsController#update as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"/lQfQRUhE8jmhSitAMkDx+bWMKLZilP29PQXGI82YaY=", "approval"=>{"name"=>"attendance", "for"=>"Regularize Attendance", "sequential"=>"Non-Sequential", "approvers_attributes"=>{"0"=>{"approver_type"=>"Role", "approver_value"=>"Reporting Manager", "id"=>"13"}}}, "commit"=>"Save", "id"=>"fYtVHpl_3zqTskQtnmedWw%3D%3D"}

the destroy parameter is not sending in parameters when i delete the Approver dropdown fields which having the value as role.

but in controller i whitelisted the params also.

def approval_params
      # params.require(:approval).permit(:company_id, :name, :for, :sequential)
      params.require(:approval).permit!
    end

and the nested form is generating the following markup in edit form:

<form accept-charset="UTF-8" action="/approvals/fYtVHpl_3zqTskQtnmedWw%253D%253D" class="form-inline" id="edit_approval_4" method="post"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="patch" /><input name="authenticity_token" type="hidden" value="/lQfQRUhE8jmhSitAMkDx+bWMKLZilP29PQXGI82YaY=" /></div>

   <div class="col-md-7"> 
     <div class="field">
       <label for="approval_name">Assign a name to this approval process.</label></br>
       <input class="form-control" id="approval_name" name="approval[name]" type="text" value="attendance" /></br></br>
    </div>


    <div class="field">
      <label for="approval_for">This approval process will be be applicable to which claim form?</label>
      <select class="form-control" id="approval_for" name="approval[for]"><option selected="selected" value="Regularize Attendance">Regularize Attendance</option>
<option value="Leave Request">Leave Request</option>
<option value="Daily Expense Claim ">Daily Expense Claim </option>
<option value="Travel Expense Claim">Travel Expense Claim</option></select></br></br>

    </div>

    <div class="field">

      <label for="approval_sequential">Does this process involve sequential or non-sequential approvals?</label>
      <select class="form-control" id="approval_sequential" name="approval[sequential]"><option value="Sequential">Sequential</option>
<option selected="selected" value="Non-Sequential">Non-Sequential</option></select>
      <br><br>

    </div>

    <div class="fields">

    <div class="field">

    <label for="approval_approvers_attributes_0_approver_type">Approver</label>
    <select class="form-control role_select" id="approval_approvers_attributes_0_approver_type" name="approval[approvers_attributes][0][approver_type]" onchange="$.fn.myFunc(this);"><option selected="selected" value="Role">Role</option>
<option value="Specific User">Specific User</option></select></br></br>

    </div> 

    <div class="field">

      <label for="approval_approvers_attributes_0_approver_value">Role</label>
      <select class="form-control appr_select" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]"><option value="HR Manager">HR Manager</option>
<option selected="selected" value="Reporting Manager">Reporting Manager</option></select>
      <input class="form-control inpt_specific_user" disabled="disabled" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]" style="display:none" type="text" value="Reporting Manager" />
      <input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a> </br></br>
    </div>

<input id="approval_approvers_attributes_0_id" name="approval[approvers_attributes][0][id]" type="hidden" value="13" /></div><div class="fields">

    <div class="field">

    <label for="approval_approvers_attributes_1_approver_type">Approver</label>
    <select class="form-control role_select" id="approval_approvers_attributes_1_approver_type" name="approval[approvers_attributes][1][approver_type]" onchange="$.fn.myFunc(this);"><option value="Role">Role</option>
<option selected="selected" value="Specific User">Specific User</option></select></br></br>

    </div> 

    <div class="field">

      <label for="approval_approvers_attributes_1_approver_value">Role</label>
      <select class="form-control appr_select" id="approval_approvers_attributes_1_approver_value" name="approval[approvers_attributes][1][approver_value]"><option value="HR Manager">HR Manager</option>
<option value="Reporting Manager">Reporting Manager</option></select>
      <input class="form-control inpt_specific_user" disabled="disabled" id="approval_approvers_attributes_1_approver_value" name="approval[approvers_attributes][1][approver_value]" style="display:none" type="text" value="john" />
      <input id="approval_approvers_attributes_1__destroy" name="approval[approvers_attributes][1][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a> </br></br>
    </div>

<input id="approval_approvers_attributes_1_id" name="approval[approvers_attributes][1][id]" type="hidden" value="14" /></div>    <a class=" add_nested_fields" data-association="approvers" data-blueprint-id="approvers_fields_blueprint" href="javascript:void(0)">Add Approvers</a></br>

   </div>


 <div class="col-md-7"> 

  </br>
    <input class="btn btn-primary" name="commit" type="submit" value="Save" />&nbsp;&nbsp;

 </div>
  <br>
<div data-blueprint="&lt;div class=&quot;fields&quot;&gt;

    &lt;div class=&quot;field&quot;&gt;

    &lt;label for=&quot;approval_approvers_attributes_new_approvers_approver_type&quot;&gt;Approver&lt;/label&gt;
    &lt;select class=&quot;form-control role_select&quot; id=&quot;approval_approvers_attributes_new_approvers_approver_type&quot; name=&quot;approval[approvers_attributes][new_approvers][approver_type]&quot; onchange=&quot;$.fn.myFunc(this);&quot;&gt;&lt;option value=&quot;Role&quot;&gt;Role&lt;/option&gt;
&lt;option value=&quot;Specific User&quot;&gt;Specific User&lt;/option&gt;&lt;/select&gt;&lt;/br&gt;&lt;/br&gt;

    &lt;/div&gt; 

    &lt;div class=&quot;field&quot;&gt;

      &lt;label for=&quot;approval_approvers_attributes_new_approvers_approver_value&quot;&gt;Role&lt;/label&gt;
      &lt;select class=&quot;form-control appr_select&quot; id=&quot;approval_approvers_attributes_new_approvers_approver_value&quot; name=&quot;approval[approvers_attributes][new_approvers][approver_value]&quot;&gt;&lt;option value=&quot;HR Manager&quotquot;&gt;HR Manager&lt;/option&gt;
&lt;option value=&quot;Reporting Manager&quot;&gt;Reporting Manager&lt;/option&gt;&lt;/select&gt;
      &lt;input class=&quot;form-control inpt_specific_user&quot; disabled=&quot;disabled&quot; id=&quot;approval_approvers_attributes_new_approvers_approver_value&quot; name=&quot;approval[approvers_attributes][new_approvers][approver_value]&quot; style=&quot;display:none&quot; type=&quot;text&quot; /&gt;
      &lt;input id=&quot;approval_approvers_attributes_new_approvers__destroy&quot; name=&quot;approval[approvers_attributes][new_approvers][_destroy]&quot; type=&quot;hidden&quot; value=&quot;false&quot; /&gt;&lt;a class=&quot; remove_nested_fields&quot; data-association=&quot;approvers&quot; href=&quot;javascript:void(0)&quot;&gt;Remove&lt;/a&gt; &lt;/br&gt;&lt;/br&gt;
    &lt;/div&gt;

&lt;/div&gt;" id="approvers_fields_blueprint" style="display: none"></div></form>

Answer 1

Try this

def approval_params
 params.require(:approval).permit(:company_id, :name, :for, :sequential, approvers_attributes: [:id, :approver_type, :approver_value, :_destroy])
end

Hopefully it will work.