如何不在DOM中添加重复元素

Question

我知道这是一个非常简单的问题，但我仍然在努力。我创建了一个函数，在Array中添加element，之后我使用forEach循环将它们附加到DOM中。但我无法阻止添加重复的elements。

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
addItem(btn.innerText);
});
function addItem(item) {
let items = [];
if (!items.includes(item)) {
items.push(item);
}
items.forEach((element) => {
const li = Object.assign(document.createElement("li"), {
innerText: element
});
document.body.appendChild(li);
});
}

@import url("https://cdn.jsdelivr.net/gh/KunalTanwar/organise.css/css/organise.inter.min.css");
body {
display: grid;
place-items: center;
}
button {
border: 0;
background: none;
padding: 1rem 2rem;
box-shadow: inset 0 0 0 1px gray;
}

<button> Add Me </button>

我已经试过了:

[...new Set(items)].forEach((element) => {
const li = Object.assign(document.createElement("li"), {
innerText: element
});
document.body.appendChild(li);
});

另一个方法-

if (!items.includes(item)) {
items.push(item);
} else {
return
}

最后-

if (!items.includes(item)) {
items.push(item);
} else {
items = [...new Set(items)]
}

但仍然没有运气!!

Answer 1

items需要外声明的函数,所以它有一个全球范围,目前,你声明一个空数组在每次调用函数在函数的范围,所以它不能找到任何现有的项目,你也需要从你的函数return如果数组中的值,指出在一个友好的评论,我也不是占多个按钮,我添加了一个修复所有按钮添加事件监听器。

const btns = document.querySelectorAll("button");
let items = [];
btns.forEach(b => b.addEventListener("click", () => {
addItem(b.innerText);
}));
function addItem(item) {
if (!items.includes(item)) {
items.push(item);
} else {
return;
}

const li = Object.assign(document.createElement("li"), {
innerText: item
});
document.body.appendChild(li);

}

@import url("https://cdn.jsdelivr.net/gh/KunalTanwar/organise.css/css/organise.inter.min.css");
body {
display: grid;
place-items: center;
}
button {
border: 0;
background: none;
padding: 1rem 2rem;
box-shadow: inset 0 0 0 1px gray;
}

<button>Add Me</button>
<button>Add Me Again</button>

Answer 2

首先，你每次重新定义项目，所以你重置它，所以你检查一个空数组。

一旦你修复了这个问题，你就会每次循环遍历数组，这样你就会不断地添加元素。您只需要附加正在添加的元素。

// Better demo, multiple buttons
const btns = document.querySelectorAll("button");
btns.forEach(btn => {
btn.addEventListener("click", () => {
addItem(btn.innerText);
});
});
// broke out the render code so we an call it in other places
// smaller chunks makes it easier to reuse
function renderItem(innerText) {
const li = Object.assign(document.createElement("li"), {
innerText
});
document.querySelector("#out").appendChild(li);
}
// define this outside the method so it holds it
// Added some default values just for fun
const items = ["d1", "d2"];
// If you want to have default things or pull from localstorage
// you can render the items in the array
items.forEach(renderItem);
// triggered by the click, add the items to UI
function addItem(item) {
// have we seen it? Yes exit
if (items.includes(item)) return;
// add the item
items.push(item);
// show it
renderItem(item);
}

@import url("https://cdn.jsdelivr.net/gh/KunalTanwar/organise.css/css/organise.inter.min.css");
body {
display: grid;
place-items: center;
}
button {
border: 0;
background: none;
padding: 1rem 2rem;
box-shadow: inset 0 0 0 1px gray;
}

<button type="button"> Add Me 1</button>
<button type="button"> Add Me 2</button>
<button type="button"> Add Me 3</button>
<ul id="out"></ul>