Javascript 如何在传递给视图的ViewModel集合中获取jQuery可选对象的值，以作为有序列表进行迭代？

我知道，这个问题很复杂。为了自己的学习，我正在开发一个小型的MVC应用程序，经过这么多的研究，我已经被困在这一点上了。我的观点是这样的（注意ItemList是一个列表）：

---

理想情况下，在.on（“单击”）中，我希望传入由目标项表示的对象，以便可以从ViewModel集合中删除该项，但我在获取实际对象而不仅仅是HTML时遇到了问题。欢迎您在本文中看到的任何关于这个问题以及任何其他问题的建议。提前谢谢。

我要看看我的水晶球，预测未来。一旦您完成了删除功能，您也会希望能够添加到列表中，对吗？好在有一个名为BeginCollectionItem的包，由Steve Sanderson编写，专门用于这个场景——在MVC中从列表中添加和删除项

我不打算写一个完整的解决方案，因为已经完成了，但我最近用这个包自己实现了这个。关于这个软件包，有几个答案可以帮助您开始。特别好

但是，为了回答您的具体问题，您可以执行链接答案中提到的操作，只需删除与列表项关联的

div

：

HTML/Razor：

@model PackItOut.ViewModels.IndexViewModel
<div id="editorRows">
    <ol id="item-list-20">
        @foreach (var i in Model.ItemList)
        {
            <div class="editorRow">
                <li class="ui-widget-content">
                    @switch (i.Category)
                    {
                        case "Food":
                            <i class="fa fa-cutlery" aria-hidden="true"></i>
                            break;
                        case "Shelter":
                            <i class="fa fa-tree" aria-hidden="true"></i>
                            break;
                        case "First Aid":
                            <i class="fa fa-medkit" aria-hidden="true"></i>
                            break;
                        case "Clothing":
                            <i class="fa fa-child" aria-hidden="true"></i>
                            break;
                        case "Fluid":
                            <i class="fa fa-tint" aria-hidden="true"></i>
                            break;
                        case "Weather":
                            <i class="fa fa-bolt" aria-hidden="true"></i>
                            break;
                        default:
                            break;
                    }
                    @i.Name
                </li>
                <button class="btn btn-danger deleteRow"><i class="fa fa-trash" aria-hidden="true"></i> Remove Item</button>
            </div>
        }
    </ol>
</div>

---

虽然您将不得不使用HTML元素，因为您无法在

中嵌套

，但从集合中删除该项是什么意思？是否要调用控制器方法从数据库中删除对象？是-这将从数据库中删除该项（可能是异步的），并刷新集合，使该项不会出现在视图中。（我还没有研究下面提供的答案）然后您需要给该项一些东西来识别它-例如，使用

数据id=“@I.id”

，以便您可以在脚本中访问它，然后根据它的

id

进行ajax调用，从数据库中删除该项，并在成功回调中，将其从DOM中删除。谢谢。。。我丢失了来自ajax调用的连接，并在成功回调中从DOM中删除了该项。

$(document).ready(function() {
var theItemList = $("ol[id*='item-list-']");
$(theItemList).selectable({
    selected: function(event, ui) {
        $(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
    },
    stop: function () {
        var hasSelection = $(".ui-selected");
        if (hasSelection != null)
            $(".change-item").css('visibility', 'visible');
        else
            $(".change-item").css('visibility', 'hidden');
    }
});
$("#remove-item-btn").on("click", function (event) {
    var targetItem = document.getElementsByClassName("ui-selected");
    if (targetItem == null)
        alert('Please select an item to remove.');
});
});

@model PackItOut.ViewModels.IndexViewModel
<div id="editorRows">
    <ol id="item-list-20">
        @foreach (var i in Model.ItemList)
        {
            <div class="editorRow">
                <li class="ui-widget-content">
                    @switch (i.Category)
                    {
                        case "Food":
                            <i class="fa fa-cutlery" aria-hidden="true"></i>
                            break;
                        case "Shelter":
                            <i class="fa fa-tree" aria-hidden="true"></i>
                            break;
                        case "First Aid":
                            <i class="fa fa-medkit" aria-hidden="true"></i>
                            break;
                        case "Clothing":
                            <i class="fa fa-child" aria-hidden="true"></i>
                            break;
                        case "Fluid":
                            <i class="fa fa-tint" aria-hidden="true"></i>
                            break;
                        case "Weather":
                            <i class="fa fa-bolt" aria-hidden="true"></i>
                            break;
                        default:
                            break;
                    }
                    @i.Name
                </li>
                <button class="btn btn-danger deleteRow"><i class="fa fa-trash" aria-hidden="true"></i> Remove Item</button>
            </div>
        }
    </ol>
</div>

$('#editorRows').on('click', '.deleteRow', function () {
    $(this).closest('.editorRow').remove();
});