jquery - 动态删除行和更新索引

Question

我有一个页面，用户可以在其中添加一行信息：

   <div id="refItem">
    FirstName 
    LastName
   </div>

用户可以按住添加按钮，然后它会通过操作 DOM 继续向该 div 追加另一行数据。它还更新 ViewModel 集合索引。ViewModel 包含一个集合，其中有上面的 FirstName 和 LastName

当 View 加载时，它使用 Model 像上面一样渲染数据（所以想象一个 for 循环渲染数据行）

问题：

如何在用户点击提交按钮之前从客户端删除行并同时更新索引？我需要什么 JQuery 来获取要删除的行然后更新 DOM？

Answer 1

这取决于您的确切标记，但总的来说：

• 用于$(selector).remove()删除行
• 循环遍历项目并用于$(this).prop("name", "value")更新索引。

这是一个例子（小提琴）

function del(index) {
    var toDelete = $("#refItem"+index);
    toDelete.remove();

    var id=1;
    // select all elements with id starting with "refItem", and loop
    $("div[id^=refItem]").each(function(item) {
        // update the "id" properties
        $(this).prop("id", "refItem"+id++);
    });
}

作为替代方案，您还可以在每一行中放置一个按钮，并使用相对选择器（如(this).parent().remove(). （小提琴）。