在 Knockout.JS 中，经常需要从 observable 数组中删除某个特定的元素。本文将介绍如何使用 Knockout.JS 实现该功能，并提供详细示例代码供读者参考。

1. 使用 remove() 方法

Knockout.JS 提供了一个名为 remove() 的方法，可以实现从 observable 数组中删除特定元素的功能。该方法接受一个函数作为参数，该函数的返回值是需要被删除的元素。例如：

var viewModel = {
    items: ko.observableArray(['Apple', 'Banana', 'Orange']),
    removeItem: function(item) {
        viewModel.items.remove(function(i) { return i === item; });
    }
};

上述示例中，viewModel.items 是一个包含三个字符串元素的 observable 数组，removeItem() 方法接收一个参数 item 表示需要删除的元素。在 removeItem() 方法中，我们传递了一个函数作为 remove() 方法的参数，该函数返回值为 true 表示该元素需要被删除。通过使用箭头函数简化代码可以改为：

var viewModel = {
    items: ko.observableArray(['Apple', 'Banana', 'Orange']),
    removeItem: (item) => viewModel.items.remove((i) => i === item)
};

2. 使用 splice() 方法

除了 remove() 方法外，我们还可以使用 JavaScript 原生的 splice() 方法实现删除特定元素的功能。例如：

-- -------------------- ---- -------
--- --------- - -
    ------ ---------------------------- --------- -----------
    ----------- -------------- -
        --- ----- - ------------------------------
        -- ------ -- -- -
            ----------------------------- ---
        -
    -
--

上述示例中，removeItem() 方法首先使用 indexOf() 方法查找需要删除元素的下标值，然后使用 splice() 方法将该元素从数组中删除。需要注意的是，splice() 方法接受两个参数，第一个参数表示需要删除元素的下标值，第二个参数表示需要删除的元素数量。

3. 总结

本文介绍了在 Knockout.JS 中删除特定元素的两种方法：remove() 和 splice()。相比于 splice() 方法，remove() 方法更为简洁和优雅，同时也更符合 Knockout.JS 的编程风格。读者可以根据自己的实际需求选择适合的方法。

示例代码

以下示例代码演示如何在 Knockout.JS 中使用 remove() 方法删除特定元素：

<ul data-bind="foreach: items">
    <li>
        <span data-bind="text: $data"></span>
        <button data-bind="click: $parent.removeItem.bind($parent, $data)">Remove</button>
    </li>
</ul>

var viewModel = {
    items: ko.observableArray(['Apple', 'Banana', 'Orange']),
    removeItem: function(item) {
        viewModel.items.remove(function(i) { return i === item; });
    }
};

ko.applyBindings(viewModel);

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29464