如果元素具有相同的文本，则删除两个元素之一答案

【问题标题】：Remove one of two elements if elements have same text如果元素具有相同的文本，则删除两个元素之一
【发布时间】：2017-02-18 04:52:30
【问题描述】：

我正在尝试在 vanilla js 中制作一个自动完成小部件。我的 html 中有一个 input 和一个 ul 元素。还为自动完成设置了 data-list 属性。

基本上，在我的 js 中，我会在输入输入字段时获取数据列表并对其进行过滤。

由于我在输入时在我的 js 中创建了li 元素，所以当我输入时我再次看到相同的文本。

那么，我可以删除相同的 li 元素吗？

JSFIDDLE

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!")
    }

  });

});

【问题讨论】：

我不明白你的想法，你为什么需要这样的代码？如果单击，例如backspace 按钮，您正在向列表中添加 3 个新的 li 元素。但是，为什么？
用于自动完成@Kinduser
你想达到什么目的？您想从所有重复元素中过滤列表吗？所以总是只有 3 个 li 具有不同值的项目？
İ如果您键入“b”，您会看到显示“黑色”。但是当我清除输入字段时，有 4 个项目（2 个黑色项目）。我想摆脱这个。 @Kinduser

标签： javascript arrays filter autocomplete

【解决方案1】：

每次搜索时，您都必须清除旧列表。所以，只需添加

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/

【讨论】：