html中用无序列表表示数组,从无序列表或有序列表中添加和删除数组的元素

我有一个随机元素的无序列表：

• First
• Second
• Third

You have selected:

我在无序列表的所有元素上添加了一个事件监听器。

var elems = document.getElementsByTagName('li');

var selected;

var arr1 = [];

Array.from(elems).forEach(v => v.addEventListener("click", onClickItems,false));

我创建了一个在单击无序列表元素时切换的函数，因此我可以在元素中添加元素或从元素中删除元素。

function onClickItems() {

this.classList.toggle('selected');

if (this.classList.contains('selected')){

selected = this.innerHTML;

arr1.push(selected);

document.getElementById("result").innerHTML = arr1.join("
");

} else {

lookValueArray(returenIndex());

document.getElementById("result").innerHTML = arr1.join("
");

}

}

添加部分工作正常但是当用户从无序列表中选择相同的元素以将其删除时，它将无法正常工作。它只删除已添加到数组中的最后一个元素。

所以，我创建了这两个函数：

第一个，用于存储所选元素进入数组时的索引。

function returenIndex () {

var indexx = arr1.indexOf(selected);

return(indexx);

}

第二个，从无序列表中查找所选索引的值，如果它等于所选索引，则将其删除。

function lookValueArray (inde1) {

if (arr1[inde1].value = selected) {

arr1.splice(inde1, 1);

}

}

仍然是相同的输出。它添加完美但它不会删除它。此外，它只会删除最后一个元素输入到数组中，即使我选择了第二个要删除的元素。

BTW，我尝试使用arr1.splice(0, 0, selected)而不是arr1.push(selected)，所以我可以让元素在特定位置进入数组但是也不会有效。