從數據列表中刪除一個項目

我有一個工作的Ajax調用和填充數據列表的函數。數據列表用於從有限列表中選擇在頁面上添加到UL元素。一旦我從數據列表中添加一個到實際列表，我想從數據列表中刪除該選項。我正在使用的蠻力方法是清除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後，下拉列表中的數據列表不會更改。這是因爲瀏覽器本質上編譯了所有的值（比如它是一個基於瀏覽器的普通自動完成）並且不會「忘記」我想要刪除的值？

來源

2013-08-01 Eddie Rowe

如果list_str確實沒問題，那麼你的代碼就可以工作。您可以在jsFiddle上查看它的行動。

您描述的行爲的最普遍原因是您的代碼刷新頁面。如果您從鏈接的小提琴中的「更改選項」按鈕中刪除type="button"，則會出現錯誤（由於小提琴本身）。在你的頁面中，你可能有類似的東西調用populate_datalist_from_array()。注意，這也是輸入在一個活躍的文本輸入將做提交/刷新。

來源

2013-08-02 11:00:28 Teemu

不完全 - 您正在使用'select'標籤而不是'datalist'標籤，但是同樣的事情是有效的。我想我找到了問題。我在相關函數中有一個錯誤的索引。 –

泰姆的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]); 
     } 
    };

（在的jsfiddle上的MacBookPro我救了10毫秒 - 15 ms總 - 500種元素的名單上，但可以用較大的DOM的更劇烈在移動）。

來源

2015-05-22 09:28:32 MultiMat

從數據列表中刪除一個項目

回答

相關問題