Question

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

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后，下拉列表中的数据列表不会更改。这是因为浏览器基本上编译了那里的所有值（就像它是普通的，基于浏览器的自动完成）并且不会“忘记”我想删除的值吗？

Answer 1

如果list_str确实没问题，那么您的代码就可以了。您可以在jsFiddle处查看该广告。

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

Answer 2

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中，我节省了10毫秒 - 总共15毫秒 - 在500个元素的列表中，但在移动设备上使用更大的DOM可能会更加引人注目）。

从datalist中删除项目

2 个答案: