asp.net mvc add & remove item from html table

To add & remove item in HTML table like this image you can like the this:

Model:

  public class StudentDetailsModels  
   {  
     public System.Guid? StudentId { get; set; }  
     public System.String StudentName { get; set; }  
     public System.String StudentFatherName { get; set; }  
     public System.String StudentAddress { get; set; }  
   }  

  public class StudentModels  
   {  
     [Key]  
     public System.Guid? StudentId { get; set; }  
     public System.String StudentName { get; set; }  
     public System.String StudentFatherName { get; set; }  
     public System.String StudentAddress { get; set; }  
     private List<StudentDetailsModels> _studentDetailsList = new List<StudentDetailsModels>();  
     public List<StudentDetailsModels> StudentDetailsList  
     {  
       get { return _studentDetailsList; }  
       set { _studentDetailsList = value; }  
     }  
   }  

View:

 @{  
   ViewBag.Title = "StudentInfo";  
   Layout = "~/Views/Shared/_Layout.cshtml";  
 }  
  <div id="divStudentDetails">  
   @Html.Partial("StudentInfoDetails")  
 </div>  

 @model ADD_REMOVE_ITEM_TABLE.Models.StudentModels  
 <script>  
   function Add() {  
     {  
       var targetDiv = '#divStudentDetails';  
       var url = "/Student/AddStudent";  
       var form = $('#frmStudentDetails');  
       var serializedForm = form.serialize();  
       $.post(url, serializedForm, function (result) { $(targetDiv).html(result); }, "html");  
       return false;  
     }  
   }  
   function Remove(ctrl) {  
     if (confirm('Pressing OK will delete this record. Do you want to continue?') == false) {  
       return false;  
     }  
     var row = $(ctrl).parent().parent().parent().children().index($(ctrl).parent().parent());  
 //    alert(row);  
     $("#refRowIndex").val(row);  
     var form = $("#frmStudentDetails");  
     var serializedForm = form.serialize();  
     var url = "/Student/RemoveStudentDetails";  
     $.post(url, serializedForm, function (result) {  
       $("#divStudentDetails").html(result);  
     }, "html");  
     return false;  
   }  
 </script>  
 <form id="frmStudentDetails">  
   <input type="hidden" id="refRowIndex" name="refRowIndex" />  
   <div class="form-horizontal">  
     <h4>Fermar Information</h4>  
     <hr />  
     <div class="form-group">  
       <table>  
         <tr>  
           <td>  
              @Html.LabelFor(model => model.StudentName, "Name" )  
           </td>  
           <td>  
              @Html.EditorFor(model => model.StudentName)  
              @Html.ValidationMessageFor(model => model.StudentName)  
           </td>  
           <td>  
              @Html.LabelFor(model => model.StudentFatherName, "Father" )  
           </td>  
           <td>  
             @Html.EditorFor(model => model.StudentFatherName)  
             @Html.ValidationMessageFor(model => model.StudentFatherName)  
           </td>  
             </tr>  
           <tr>  
           <td>  
              @Html.LabelFor(model => model.StudentAddress, "Address" )  
           </td>  
           <td>  
           @Html.EditorFor(model => model.StudentAddress)  
           @Html.ValidationMessageFor(model => model.StudentAddress)  
           </td>  
           <td>  
             <input type="submit" value="Add" class="btn btn-default" onclick="return Add();" />  
           </td>  
             </tr>  
       </table>  
       <table class="table">  
         <tr>  
           <th>  
            Name  
           </th>  
           <th>  
              Father Name  
           </th>  
           <th>  
             Address  
           </th>  
           <th>  
             Remove  
           </th>  
         </tr>  
         @for(int i=0;i<Model.StudentDetailsList.Count();i++)  
         {  
           <tr>  
             <td>  
               @Html.EditorFor(m => m.StudentDetailsList[i].StudentName)  
             </td>  
             <td>  
               @Html.EditorFor(m => m.StudentDetailsList[i].StudentFatherName)  
             </td>  
             <td>  
               @Html.EditorFor(m => m.StudentDetailsList[i].StudentAddress)  
             </td>  
             <td >  
               <input value="Remove" type="button" onclick="return Remove(this);" />  
             </td>  
           </tr>  
         }  
       </table>  
        <input value="Save" type="button" />  
     </div>  
     </div>  
   </form>  

Controller:

 public ActionResult StudentInfo()  
     {  
       StudentModels model = new StudentModels();  
       model.StudentDetailsList = new List<StudentDetailsModels>();  
       return View(model);  
     }  
     public ActionResult AddStudent(StudentModels model)  
     {  
       StudentDetailsModels studentObj = new StudentDetailsModels();  
       studentObj.StudentName = model.StudentName;  
       studentObj.StudentFatherName = model.StudentFatherName;  
       studentObj.StudentAddress = model.StudentAddress;  
         model.StudentDetailsList.Add(studentObj);  
         return PartialView("StudentInfoDetails", model);  
     }  
     public ActionResult RemoveStudentDetails(StudentModels model, FormCollection collection)  
     {  
       int rowIndex = int.Parse(collection.Get("refRowIndex"));  
       model.StudentDetailsList.RemoveAt(rowIndex - 1);  
       ModelState.Clear();  
       return PartialView("StudentInfoDetails", model);  
     }