我是JavaScript新手。我有一个小代码,可从输入创建列表,然后将其添加到数组中。单击该项目后,可以从DOM中删除一个项目,但无法从数组中将其删除。
我尝试使用array.splice(item, 1)
lists.addEventListener("click", function (e) {
e.target.closest("li").remove();
userInputArr.splice(item, 1);});
但是它有时会删除整个数组,有时会删除最后一个项目。当我用控制台登录代码时,即使我只单击了一次,它也似乎在列表上单击了3或4次。我不知道怎么了这是完整的代码:
const lists = document.querySelector(".lists");
const userInput = document.querySelector(".add-note");
const addBtn = document.querySelector(".add-btn");
const item = document.querySelectorAll(".list");
userInputArr = [];
function addNote() {
if (userInput.value < 1) {
return;
}
lists.insertAdjacentHTML(
"afterbegin",
`<li class='list'>${userInput.value}</li>`
);
userInputArr.push(lists);
lists.addEventListener("click", function (e) {
e.target.closest("li").remove();
userInputArr.splice(item, 1);
});
userInput.value = "";
}
addBtn.addEventListener("click", function () {
addNote();
});
代码完全没有意义
1)
userInputArr.push(lists)
为什么您总是要推送相同的元素?因为列表是指类“ lists”的第一个也是唯一的元素?
2)
userInputArr.splice(item, 1)
请仔细观察什么接头?第一个参数是数字,但是您传递了一个带有“列表”类的元素的集合。但是我甚至都没有建议应该删除哪个元素,因为它包含与我在第一点中提到的元素相同的元素
3)完全不需要此数组
所以正确的方法是这样的
const lists = document.querySelector(".lists");
// just once create listener, no need to do it each time
lists.addEventListener("click", function (e) {
// if you want to remove clicked item then
if (e.target.tagName === 'LI') e.target.remove();
// but if you want to remove the first one then uncomment line
// if (this.children[0]) this.children[0].remove()
});
const userInput = document.querySelector(".add-note");
const addBtn = document.querySelector(".add-btn");
///////////////////////////////////////////////////
// item is meaninglee here, so delete this line
// const item = document.querySelectorAll(".list");
//////////////////////
// array is useless too, delete this line
// userInputArr = [];
function addNote() {
// check if it is number
if (isNaN(userInput.value) || Number(userInput.value < 1)) {
return;
}
lists.insertAdjacentHTML(
"afterbegin",
`<li class='list'>${userInput.value}</li>`
);
userInput.value = "";
}
addBtn.addEventListener("click", function () {
addNote();
});
const items = (() => {
const _items = {};
let key = 0;
return {
put(value) {
_items[key++] = value;
console.log("Added", this.all());
return key - 1;
},
remove(key) {
delete _items[key++];
console.log("Removed", this.all());
},
all(asArray = true) {
return asArray ? Object.values(_items) : { ..._items
};
}
}
})();
const inputEl = document.querySelector(".input");
const itemsEl = document.querySelector(".items");
const addBtn = document.querySelector(".btn-add");
addBtn.addEventListener("click", () => {
const value = inputEl.value.trim();
if (!value.length) return;
const key = items.put(value);
const li = document.createElement("li");
li.textContent = value;
li.dataset.key = key;
itemsEl.append(li);
inputEl.value = "";
});
itemsEl.addEventListener("click", (e) => {
const li = e.target.closest("li");
items.remove(li.dataset.key);
li.remove();
});
<input type="text" class="input">
<button class="btn-add">Add</button>
<ul class="items"></ul>
运行代码并全屏查看。
使用shift()
userInputArr.shift()
您还会得到双击,因为addNote()
函数包含一个事件侦听器lists.addEventListener
,并且它是由另一个事件列表器addBtn.addEventListener
执行的,因此您可能应该移动lists.addEventListener
功能之外的addNote