Jquery 动态删除视图中的行：仅第一行受影响

我试图构建一个动态视图，用户可以在其中随意添加和删除行

到目前为止，我已经成功地添加了一个新行，但是删除一行只会删除第一行，现在添加了新行

以下是主视图的渲染方式：

@using MyApp.Models
@using MyApp.Utilities
@model PackUtility

@{
    ViewBag.Title = "Item to Sell:" + Model.mTitle;
}

<script language="javascript">
    $(document).ready(function () {
        $('#addItemUtilityZone').click(function () {
            $.ajax({
                url: '@Url.Action("AddItemUtilityRow")',
                cache: false,
                success: function (html) {
                    $('#addItemUtilityZone').append(html);
                }
            });
        });
        $('a.deleteRow').click(function () {
            alert("clicked");
            $(this).parents("div.editorRow:first").remove();
            return false;
        });
    });
</script>

@using (Html.BeginForm("SelectItemToSell", "Item", FormMethod.Post, new { onsubmit = "ShowProgress()"}))
{
    @Html.ValidationSummary(true)

    <div class="formStyle baseFontSize">
        (...)
        <div>
                <div>
                    >> Possible Quantity: @Html.DisplayFor(_item => _item.mPossibleQuantity) <<
                </div>
                <div class="formStyle" id="addItemUtilityZone">
                    <label class="center bold bigFontSize">Options</label>
                    @foreach (ItemListingUtility utilityRow in Model.ListItemUtility)
                    {
                        Html.RenderPartial("ItemUtilityRow", utilityRow);
                    }

                </div>
                <div>
                    <a href="javascript:void(0);" id="addPackAuctionUtility">Add row</a>
                </div>
        </div>
    </div>
}

@使用MyApp.Models
@使用MyApp.Utilities
@模型填充性
@{
ViewBag.Title=“要销售的商品：”+Model.mTitle；
}
$（文档）.ready（函数（）{
$（'#addItemUtilityZone'）。单击（函数（）{
$.ajax({
url:'@url.Action（“AddItemUtilityRow”），
cache:false，
成功：函数（html）{
$（'#addItemUtilityZone'）。附加（html）；
}
});
});
$（'a.deleteRow'）。单击（函数（）{
警报（“点击”）；
$（this）.parents（“div.editorRow:first”）.remove（）；
返回false；
});
});
@使用（Html.BeginForm（“SelectItemToSell”、“Item”、FormMethod.Post、new{onsubmit=“ShowProgress（）”}））
{
@Html.ValidationSummary（true）
(...)
>>可能数量：@Html.DisplayFor（\u item=>\u item.mPossibleQuantity）像这样试试，你需要在这里

要删除行，最好使用而不是

事件委派允许我们将单个事件监听器附加到父元素，该监听器将为与选择器匹配的所有子元素触发，无论这些子元素现在存在还是将来添加

在动态生成元素的情况下，您可以使用最接近的父元素作为选择器，我得到了
#addItemUtilityZone
，因为新的元素/行被附加到此div，您也可以尝试使用
document.body

        $(this).parents("div.editorRow").remove();

它应该会起作用。
但是如果你想过滤，使用

        $(this).parents("div.editorRow:first-child").remove();

不，仍然是相同的结果。你确定要针对整个
#addItemUtilityZone
？它似乎不起作用…更新解决了这个问题，我确实需要将它包装在体内。谢谢！）
$(document.body).on('click','a.deleteRow',function () {

});

        $(this).parents("div.editorRow").remove();

        $(this).parents("div.editorRow:first-child").remove();