我目前正在嘗試構建一個串列應用程式，其中用戶向串列輸入一個專案，輸入的專案顯示在頁面上并被推送到一個名為“專案”的陣列中。
專案顯示在頁面上并被推送到陣列的部分作業正常，以及從頁面中洗掉專案。我遇到麻煩的地方是從陣列中洗掉。發生的情況是，當專案從 DOM 中移除時，對應的陣列元素并不總是被移除。
似乎同時從頁面和陣列中洗掉專案并不那么容易。我需要將專案推送到一個陣列，因為這個陣列將用于其他我已經弄清楚的東西。
目前，我正在嘗試使用 splice，但這似乎效果不佳。
我還嘗試將此程式重寫為首先將專案推送到陣列的位置，然后使用 for 回圈遍歷陣列并使專案出現在頁面上。
下面的鏈接指向相關應用程式的實時版本。它托管在我的 Neocities 帳戶上。
感謝任何可以提供幫助的人！
https://chillaxin-cyborg.neocities.org/ListApp.html
這是我的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#myList {
list-style: none;
}
li {
padding: 10px;
max-width: 300px;
background-color: rgb(186, 255, 129);
font-size: larger;
font-weight: bold;
border-style: double;
border-radius: 10px;
text-align: center;
margin: 5px;
}
.remove-btn {
float: right;
background-color: red;
color:black;
}
#itemAdd {
padding: 10px;
font-size: larger;
text-align: center;
}
#itemName {
padding: 10px;
max-width: 300px;
font-size: larger;
font-weight: bold;
border-style: double;
text-align: center;
}
</style>
</head>
<body>
<div >
<form action="" method="post">
<input type="text" id="itemName">
<button onclick="addItem()" id="itemAdd">ADD</button>
</form>
<div>
<ul id="myList">
</ul>
</div>
</div>
<script>
let items = [];
const addItem = () => {
event.preventDefault();
let myList = document.getElementById('myList');
let listItem = document.createElement('li');
listItem.innerText = itemName.value " ";
myList.append(listItem);
let removeButton = document.createElement('button');
removeButton.innerText = "-";
removeButton.className = "remove-btn"
removeButton.addEventListener('click', removeItem);
listItem.append(removeButton);
items.push(itemName.value);
document.forms[0].reset();
}
const removeItem = () => {
let item = event.currentTarget.parentNode;
item.remove();
let itemIndex = items.indexOf(item);
items.splice(itemIndex, 1);
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
我在這里盲目編程，所以如果代碼不是完美無缺的，那就不要管我了。
有什么問題是let itemIndex = items.indexOf(item);用節點（某種 DOM 物件）搜索字串陣列的那一行。
相反，data-*向您的<li>元素添加一個屬性，您可以在其中添加用戶鍵入的內容，并通過dataset 屬性提取該屬性。然后使用該字串搜索您的list陣列。
我冒昧地重構了您的一些代碼以使其更具可讀性。
let items = [];
var createListItem = (text) => {
let listItem = document.createElement('li');
listItem.innerText = text;
listItem.setAttribute('data-value', text); // adding a data attribute
return listItem;
}
var createRemoveButton() {
let removeButton = document.createElement('button');
removeButton.innerText = "-";
removeButton.className = "remove-btn"
removeButton.addEventListener('click', removeItem);
return removeButton;
}
const addItem = () => {
event.preventDefault();
let userInput = itemName.value.trim();
let myList = document.getElementById('myList');
let listItem = createListItem(userInput);
listItem.append(createRemoveButton());
myList.append(listItem);
items.push(userInput);
document.forms[0].reset();
}
const removeItem = (event) => {
let item = event.currentTarget.parentNode;
let userInput = item.dataset.value; // extracting the data attribute
item.remove();
let itemIndex = items.indexOf(userInput);
items.splice(itemIndex, 1);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/346168.html
標籤：javascript 数组 dom