Remove / Delete a dynamically created partial view mvc - asp.net-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
how to get the ID generated by BeginItemCollection
use the ID in a remove script
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:
$('#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);
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