从数据列表中删除项目答案

【问题标题】：Remove an item from datalist从数据列表中删除项目
【发布时间】：2013-08-02 20:31:05
【问题描述】：

我有一个有效的 Ajax 调用和填充数据列表的函数。 datalist 用于从有限列表中选择添加到页面上的 UL 元素。一旦我将数据列表中的一个添加到实际列表中，我想从数据列表中删除该选项。我使用的蛮力方法是清除数据列表并重新填充它。

function populate_datalist_from_array(list_id, list_str)
{
    clearChildren( list_id );
    var arr = eval ( list_str );
    for (var i = 0; i < arr.length; i++) {
        var opt = document.createElement('option');
        opt.innerHTML = arr[i];
        opt.value = arr[i];
        document.getElementById(list_id).appendChild(opt);
    }
}

function clearChildren( parent_id ) {
    var childArray = document.getElementById( parent_id ).children;
    if ( childArray.length > 0 ) {
        document.getElementById( parent_id ).removeChild( childArray[ 0 ] );
        clearChildren( parent_id );
    }
}

我已验证 list_str 对象是正确的。即，它仅包含当前列表中尚未包含的选项。但是在使用该新列表调用populate_datalist_from_array 后，下拉列表中的数据列表不会改变。这是因为浏览器基本上已经编译了所有存在的值（就像它是一个普通的、基于浏览器的自动完成）并且没有“忘记”我想要删除的值？

【问题讨论】：

标签： javascript html html-datalist

【解决方案1】：

Teemu 的 JsFiddle 工作正常。但是，通常最好避免递归，以及在不需要时避免多次 DOM 查询。

这是一个只需要一个 DOM 查询并且是迭代的编辑。（注意索引前递减，因为这是一个从零开始的列表）

    clearChildren = function (parent_id) {
        var parent = document.getElementById(parent_id);
        var childArray = parent.children;
        var cL = childArray.length;
        while(cL > 0) {
            cL--;
            parent.removeChild(childArray[cL]);
        }
    };

（在 MacBookPro 上的 JSFiddle 中，我在 500 个元素的列表中节省了 10 毫秒 - 从总共 15 毫秒 - 但在移动设备上使用更大的 DOM 可能会更加引人注目）。

【讨论】：

【解决方案2】：

如果list_str 真的没问题，你的代码就可以工作。你可以在jsFiddle查看它。

您所描述的行为的最普遍原因是您的代码刷新了页面。如果您从链接的小提琴中的“更改选项”按钮中删除type="button"，您将收到错误消息（由于小提琴本身）。在您的页面中，您可能有类似的调用populate_datalist_from_array()。请注意，在活动文本输入上也按 Enter 将执行提交/刷新。

【讨论】：

不完全-您使用的是select标签而不是datalist标签，但同样的工作。我想我找到了问题所在。我在相关函数中有一个错误的索引。