Remove / Delete a dynamically created partial view mvc

Question

I am trying to add a remove/delete a dynamically created partial view. This is my ADD script.

    $("#btnAdd").on('click', function () {
    $.ajax({
        async: false,
        url: '/Employees/Add'
    }).success(function (partialView) {
        $('#AddSchedule').append("<tbody>" + partialView + "</tbody>");      
    });
});

this is the add controller

public ActionResult Add()
    {
        var schedViewModel = new FacultySchedViewModel();
        return PartialView("~/Views/Employees/_DynamicView.cshtml", schedViewModel);
    }

this is the partial view _DynamicView.cshtml

@using(Html.BeginCollectionItem("New")){
    <td>
        @Html.ActionLink("Delete", "DeleteThis", "MyController", null)
    </td>
    <td>
        @Html.EditorFor(model => @Model.Schedule, new { htmlAttributes = new { @class = "form-control" } })
    </td> }

what i can't figure out are

1. how to get the ID generated by BeginItemCollection
2. use the ID in a remove script
3. action on the controller

EDIT 1. How to connect it to a button or a link for removing the row

Added the view on the the Main of the partial view

 @for (int i = 0; i < @Model.New.Count(); i++)
                {               
                   @Html.EditorFor(model => @Model.New[i])

                }

Answer 1

The BeginItemCollection add a Guid as an indexer to the controls name and id attributes. It has no relevance at all to identifying an item to delete. You need add include the value of the property that identifies the FacultySchedViewModel object. Assuming its int ID, then change the partial to include a button and add the ID as a data- attribute

@using(Html.BeginCollectionItem("New"))
{
  <tr>
    <td><button type="button" class="delete" data-id="@Model.ID">Delete</button></td>
    <td>@Html.EditorFor(model => @Model.Schedule, new { htmlAttributes = new { @class = "form-control" } })</td>
  </tr>
}

Then your script would be

var url = '@Url.Action("Delete")'; // assumes its in the same controller
$('.delete').click(function() {
  var id = $(this).data('id');
  var row = $(this).closest('tr');
  if (id) { // or if(id == 0) depending if your property is nullable
    row.remove(); // the item never existed so no need to call the server
    return;
  }
  $.post(url, { ID: id }, function(response) {
    if(response) {
      row.remove(); // OK, so remove the row
    } else {
      // Oops - display and error message?
    }
  });
});

and the controller

[HttpPost]
public JsonResult Delete(int ID)
{
  // Delete the item in the database
  return Json(true); // or if there is an error, return Json(null); to indicate failure
}

Side note:

1. $('#AddSchedule').append("<tbody>" + partialView + "</tbody>"); is adding a new tbody element for each item. Instead the main view should include the tbody element and give it the id so its $('#AddSchedule').append(partialView); or use $('#AddSchedule tbody')append(partialView);
2. Does the model your posting back really have a property named New (as you indicate in the BeginItemCollection method)?

Answer 2

As per your html render, what I suggest to modify your partial view as

From 
  @Html.ActionLink("Delete", "DeleteThis", "MyController", null)
To
  @Html.ActionLink("Delete", "DeleteThis", "MyController", new { hidefocus = "hidefocus" } )  //add custom properties for here, which you can grab at client side or give css here.

Now search the anchor link via jQuery: Find the element with a particular custom attribute When you get id, you can go parent like $('#id').parent().parent().hide() or empty()

or

As second option, is on click of Delete button call the same controller , but with a parameter to identify delete, so while returning give the null will bind in ajax again with empty string.

Why does Html.ActionLink render "?Length=4"

http://forums.asp.net/t/1787278.aspx?Add+and+remove+partial+views