MVC 5 BeginCollectionItem remove item from the page

Question

I'm trying to remove items from a list that I created following This question. The add part of the functionality works just fine.

When I specify an event in the onclick event on the partial page I get a javascript error. "'Function Name' is undefined." Looking it over I think the onclick attribute isn't required if the jquery is working. However, even after updating it to work with the latest version of JQuery it isn't detecting a click event, or at least it isn't triggered.

Main_View just the relevant sections

    <table id="pastSchoolContainer">
        <tr>
            <td>
                <input type="button" id="addPastSchool" name="addPastSchool" value="Add School" />
            </td>
        </tr>
        @foreach (var school in Model.SchoolsAttended)
        {
            Html.RenderPartial("_SchoolRemovablePartial", school, new ViewDataDictionary(ViewData)
            {
                TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "SchoolsAttended" }
            });
        }
    </table>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        $(document).ready(function () {
            $("#addPastSchool").click(function () {
                $.ajax({
                    async: false,
                    url: '/Student/AddPastSchool',
                }).success(function (partialView) {
                    $("#pastSchoolContainer").append(partialView);
                    return;
                });
            });
            return;
        });

        $("#addPastSchool").on("click", ".deleteRow", function () {
            $(this).parents("#pastSchool:first").remove();
            return false;
        });
    </script>
}

_SchoolRemovablePartial

@model ScholarSponsor.Models.SchoolModel
@using ScholarSponsor.Helper

@using (Html.BeginCollectionItem("pastSchool"))
{
    <tr id="pastSchool">
        <td>
            @Html.EditorForModel()
            <br />
            @*<a href="#" id="deleteRow" class="deleteRow" onclick="deleteFunction()">Delete</a>*@
            <input type="button" class="deleteRow" value="Remove School" onclick="remove()" />
        </td>
    </tr>
}

@israelaltar The javascript functions are all on the main page for the action. — Robert, Aug 13 '15 at 06:20

score -1 · Accepted Answer · answered Aug 13 '15 at 09:12

Extending Stephen's answer the remove function needs to be inside a function that runs when the document is ready. Also, the button shouldn't have an onclick attribute.

The relevant code sections look like this.

Main_View

    <table id="pastSchoolContainer">
        <tr>
            <td>
                <input type="button" id="addPastSchool" name="addPastSchool" value="Add School" />
            </td>
        </tr>
        @foreach (var school in Model.SchoolsAttended)
        {
            Html.RenderPartial("_SchoolRemovablePartial", school, new ViewDataDictionary(ViewData)
            {
                TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "SchoolsAttended" }
            });
        }
    </table>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        $(document).ready(function () {
            $("#addPastSchool").click(function () {
                $.ajax({
                    async: false,
                    url: '/Student/AddPastSchool',
                }).success(function (partialView) {
                    $("#pastSchoolContainer").append(partialView);
                    return;
                });
            });

            $("#pastSchoolContainer").on("click", ".deleteRow", function () {
                $(this).closest(".pastSchool").remove();
                return;
            });
        });
    </script>
}

_SchoolRemovablePartial

@model ScholarSponsor.Models.SchoolModel
@using ScholarSponsor.Helper

@using (Html.BeginCollectionItem("pastSchool"))
{
    <tr class="pastSchool">
        <td>
            @Html.EditorForModel()
            <br />
            <input type="button" class="deleteRow" value="Remove School" />
        </td>
    </tr>
}

All I know for sure is that when I put the `$("#pastSchoolContainer").on(...)` function inside a `$(document).ready()` it started working. I suspect it is related to the version of JQuery I'm using, jquery-2.1.4, but it could be something about MVC5. — Robert, Aug 16 '15 at 05:07

MVC 5 BeginCollectionItem remove item from the page

1 Answers1