Adjust this javascript to work with li in addition to tr

Question

I have a javascript function that let's me do an ajax MVC callback to delete a record, then it removes the tr from the table to indicate it has been removed. The code works fine, but now I'd like to extend the script to work with ul/li items as well. Below is the setup that works. After that is the ul/li setup I'd like to extend the script to.

Here's the <tr>

<tr>
    ...
    <td>
        <a href="javascript:void(0)"
           onclick="ModifyCustomField('#createCustom','#customFieldEdit','@Url.RouteUrl("Default",
                new { action = "_CustomFieldEdit", id = item.CustomFieldId },
                Request.Url.Scheme)');">Edit</a> |
        <div class="delete-section">
            <a class="delete-link" href="@Url.Action("_CustomFieldDelete", new {id = item.CustomFieldId})">Delete</a>
            <div class="btn btn-primary delete-confirm" style="display: none"
                 data-delete-id="@item.CustomFieldId"
                 data-delete-controller="customforms"
                 data-delete-action="_customfielddelete">Confirm Delete</div>
        </div>
    </td>
</tr>

And the script:

$(Document).on("click","a.delete-link",function (event) {
    var deleteLink = $(this);
    deleteLink.hide();
    var confirmButton = deleteLink.siblings(".delete-confirm");
    confirmButton.show();

    var cancelDelete = function () {
        removeEvents();
        showDeleteLink();
    };

    var deleteItem = function () {
        removeEvents();
        confirmButton.hide();
        var url = '/' + confirmButton.attr('data-delete-controller') + '/' + confirmButton.attr('data-delete-action') + '/' + confirmButton.attr('data-delete-id');
        $.post(
            url,
            AddAntiForgeryToken({ id: confirmButton.attr('data-delete-id') }))
           .done(function () {
               var parentRow = deleteLink.parents("tr:first");
               parentRow.fadeOut('fast', function () {
                   parentRow.remove();
               });
           }).fail(function (data) {
               alert("error");
           });
        return false;
    };

    var removeEvents = function () {
        confirmButton.off("click", deleteItem);
        $(document).on("click", cancelDelete);
        $(document).off("keypress", onKeyPress);
    };

    var showDeleteLink = function () {
        confirmButton.hide();
        deleteLink.show();
    };

    var onKeyPress = function (e) {
        //Cancel if escape key pressed
        if (e.which == 27) {
            cancelDelete();
        }
    };

    confirmButton.on("click", deleteItem);
    $(document).on("click", cancelDelete);
    $(document).on("keypress", onKeyPress);

    return false;
});

The <li> items are set up like this:

<li class="editorRow ui-state-default">
    @using (Html.BeginCollectionItem("CustomFieldOptions"))
    {
        <div class="row">
            @Html.HiddenFor(model => model.CustomFieldOptionId)
            @Html.HiddenFor(model => model.CustomFieldId)
            @Html.HiddenFor(model => model.SortOrder, new { @class = "SortOrder" })
            @Html.HiddenFor(model => model.IsActive)

            @Html.ValidationMessageFor(model => model.OptionLabel, "", new { @class = "text-danger" })

            <div class="col-md-2">
                @Html.LabelFor(model => model.OptionLabel, htmlAttributes: new { @class = "control-label" })
            </div>
            <div class="col-md-7">
                @Html.EditorFor(model => model.OptionLabel, new { htmlAttributes = new { @class = "form-control" } })
            </div>
            <div class="col-md-3">
                <a class="delete-link" href="@Url.Action("_OptionEditorRowDelete", new {id = Model.CustomFieldOptionId})">Delete</a>

                <input type="button" value="Delete" class="btn delete-link" />
                <div class="btn btn-primary delete-confirm" style="display: none"
                     data-delete-id="@Model.CustomFieldOptionId"
                     data-delete-controller="customforms"
                     data-delete-action="_OptionEditorRowDelete">Confirm Delete</div>
            </div>
        </div>
    }
</li>

I was thinking I could change this:

$(Document).on("click","a.delete-link",function (event) {
    //...
    var parentRow = deleteLink.parents("tr:first");

to this:

$(Document).on("click",".delete-link",function (event) {
    //...
    var parentRow = deleteLink.parents("tr:first li:first");

But I'm not sure about the 'parents' line.

Answer 1

I'd just add the same class to both - li:

<li class="my-item editorRow ui-state-default">
    ...
</li>

and tr:

<tr class="my-item">
    ...
</tr>

And then use jQuery's .closest() method:

var parentRow = deleteLink.closest(".my-item");

Answer 2

Just add a comma to the selector like Lauromine suggests. Should work then.

var parentRow = deleteLink.parents("tr:first, li:first");