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")更新索引。

以下是一个示例（Fiddle）

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()之类的相对选择器将其删除。（Fiddle）。

动态删除行和更新索引

1 个答案: