<li> 使用 JS 删除元素时删除相应的数组对象

Question

我正在创建一个小的登陆页面，最后，它将随机选择一个城市，存储在用户输入选择下一次旅行的地点之间。当用户在输入字段中输入城市名称时，一切正常，在有序列表中创建一个新的列表元素，并将名称推入数组(以便稍后在一个之间随机选择)。但当我试图用close函数删除城市名称时，list元素正确地消失了，但在数组中，它不是删除所选项，而是删除位置0上的对象。我想弄清楚我的代码出了什么问题。下面是我到目前为止写的代码:

const submitBtn = document.querySelector(".addCity");
const cityList = document.querySelector(".city-ol");
let createdLi = document.getElementsByTagName("li");
const lis = document.querySelectorAll(".city-ol li");
let array = [];
submitBtn.addEventListener("click", newElement);

function newElement() {
let li = document.createElement("li");
let inputValue = document.querySelector(".inputTextField");
let t = document.createTextNode(inputValue.value);
li.appendChild(t);
if (inputValue.value === "") {
alert(
"Attenzione, il campo di inserimento della città è vuoto. Inserire una città."
);
} else {
cityList.appendChild(li);
array.push(inputValue.value);
inputValue.value = "";
}
var span = document.createElement("SPAN");
var txt = document.createTextNode("u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);

var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
let div = this.parentElement;
div.style.display = "none";
array.splice(close[i], 1);
};
};
};

body {
font-family: "Poppins", sans-serif;
height: 900px;
text-align: center;
}
#landing-section {
height: 100%;
}
.container {
height: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 5px;
justify-content: center;
align-content: center;
}
.header {
/* background-color: #935ee9; */
grid-column: 1 / -1;
border: 1px solid #000000;
}
.main-head {
font-size: 3rem;
text-transform: uppercase;
margin-bottom: 0;
}
.main-para {
font-size: 1.2rem;
margin-top: 10px;
}
.cityInput {
display: flex;
justify-content: center;
align-items: center;
/* background-color: #a8d051; */
grid-column: 1 / 2;
grid-row: 2 / 3;
border: 1px solid #000000;
}
.inputTextField {
width: 200px;
}
.cityList {
display: flex;
justify-content: center;
align-items: center;
/* background-color: #a98649; */
grid-column: 1 / 2;
grid-row: 3 / -1;
width: 100%;
border: 1px solid #000000;
}
.city-ol {
font-size: 1.5rem;
width: 100%;
}
.city-ol li:nth-child(odd) {
background: #f9f9f9;
}
li {
margin: 5px 20px;
}
.close {
position: relative;
top: 3px;
float: right;
}

.close:hover {
background-color: #DCDCDC;
color: white;
}
.cityImage {
/* background-color: #14d50e; */
grid-column: 2 / -1;
grid-row: 2 / -1;
border: 1px solid #000000;
}

<section id="landing-section">
<div class="container">
<div class="header">
<h1 class="main-head">Make That Trip</h1>
<p class="main-para">Are we ready to choose our next trip?</p>
</div>
<div class="cityInput">
<input class="inputTextField" type="text" value="" data-type="city" placeholder="Inserisci la meta">
<button class="addCity">Aggiungi</button>
</div>
<div class="cityList">
<table>
<ol class="city-ol">
</ol>
</table>
</div>
<div class="cityImage">City Image</div>
</div>
</section>

Answer 1

解决问题有两种方法

1. 当你添加任何新元素时，dom上的所有'close'都会被添加到close中[]

Here element is present on DOM, Which get audited during add Element
let div = this.parentElement;
div.style.display = "none"; 
FIX: Remove it from DOM
let elm = this.parentElement;
elm.remove();

2. 在循环执行期间，i变量将递增为1 2 3…但是在函数执行过程中就不一样了

FIX : Delecare i using let 
for (let i = 0; i < close.length; i++) {

Answer 2

感谢您的回答，我才能够找出并解决这个问题，我将在下面解释:

1. 这里我将列表的文本内容与span隔离开来，以便它与数组对象

   完全匹配。

   let textNode = div.childNodes[0],
   text = textNode.textContent;
   

2. 最后，我设置了array。indexof()等于上面孤立的文本然后我用if语句检查了一下，如果index的值大于-1那么触发array。splice()方法

   let index = array.indexOf(text);
   if (index > -1) {
   array.splice(index, 1);
   };