刪除兩個元素之一，如果元素具有

我試圖在香草js.I的自動完成構件相同的文字有input，在我html.Also一個ul元素設置自動完成data-list屬性。刪除兩個元素之一，如果元素具有

基本上，在我的js中，我獲取數據列表並在我輸入字段時對其進行過濾。

因爲我在打字時在我的js中創建了li元素，所以當我輸入時我又有相同的文字。

那麼，我可以刪除相同的li元素嗎？

HTML：

<input class="input" type="text" data-list="black,white,red"/> 
<ul class="list"></ul>

JS：

var input = document.querySelector(".input"); 
var list = document.querySelector(".list"); 

// Made data list array 
var data_list = input.getAttribute("data-list"); 
data_list = data_list.split(","); 

var typing_arr = []; 
input.addEventListener("keyup", function(e) { 
    var typing = data_list; 

    // Filter data-list array 
    typing = typing.filter(function(item) { 
    return item.toLowerCase().search(e.target.value.toLowerCase()) != -1; 
    }); 

    typing_arr = typing; 

    // Show data-list according to filter 
    typing_arr.map(function(list_item) { 
    var li = document.createElement("li"); 
    list.appendChild(li); 
    li.innerHTML = list_item; 

    //Remove same elements from list 
    if (list.children.length > typing.length) { 
     console.log("Remove the same!") 
    } 

    }); 

});

來源

2017-02-17 Norx

我不明白你的思維方式，你爲什麼需要這樣的代碼？如果你點擊，例如'backspace'按鈕，您將添加3個新的'li'元素到列表中。但爲什麼？ –

用於自動完成的目的@Kinduser – Norx

你想實現什麼？你想過濾所有重複元素的列表？所以總是隻有3個「li」項目具有不同的值？ –

每當你搜索，你必須清除舊名單。所以，只需加上

list.innerHTML = '';

到功能的起始，你就完成了。這裏：

var input = document.querySelector(".input"); 
var list = document.querySelector(".list"); 

// Made data list array 
var data_list = input.getAttribute("data-list"); 
data_list = data_list.split(","); 

var typing_arr = []; 
input.addEventListener("keyup", function(e) { 
    list.innerHTML = ''; //CHANGE 
    var typing = data_list; 

    // Filter data-list array 
    typing = typing.filter(function(item) { 
    return item.toLowerCase().search(e.target.value.toLowerCase()) != -1; 
    }); 

    typing_arr = typing; 

    // Show data-list according to filter 
    typing_arr.map(function(list_item) { 
    var li = document.createElement("li"); 
    list.appendChild(li); 
    li.innerHTML = list_item; 

    //Remove same elements from list 
    if (list.children.length > typing.length) { 
     console.log("Remove the same!") 
    } 

    }); 

});

的jsfiddle：https://jsfiddle.net/1Lvck9cn/3/

來源

2017-02-17 20:52:30

刪除兩個元素之一，如果元素具有

回答

相關問題