How not to add duplicate elements in the DOM

Question

I know it is a very easy question but I am still struggling. I created a function which adds element in an Array and after that I am using forEach loop for appending them in the DOM. But I am unable to prevent addition of duplicate 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>

What I have tried so far :

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

  document.body.appendChild(li);
});

Another Method -

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

lastly -

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

But still no luck!!

You redefine `items` every time. You also are adding the array multiple times — epascarello, Dec 23 '22 at 17:55

Ryan Wilson · Accepted Answer · 2022-12-23T18:08:05.710

2

items needs to be declared outside of the function so it has a global scope, currently, you are declaring it to an empty array on each call to the function in the scope of the function, so it can't find any existing items, also you need to return from your function if the value is found in the array, as pointed out in a friendly comment, I also was not accounting for multiple buttons, which I added a fix for this to add event listeners to all buttons.

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>

edited Dec 23 '22 at 18:08

answered Dec 23 '22 at 17:55

Ryan Wilson

10,223
2
21
40

some context here? – Kunal Tanwar Dec 23 '22 at 17:56
1

Still has a flaw, your demo just prevents it from being seen. `addItem(1); addItem(2); addItem(3);` – epascarello Dec 23 '22 at 17:56
@epascarello is right! what if we have other buttons as well!! I Updated my question! – Kunal Tanwar Dec 23 '22 at 17:57
1

@RyanWilson try it and find out. It will be obvious. – epascarello Dec 23 '22 at 17:59
@epascarello You were right, I was not taking into account that it was iterating the array on each call if the item didn't exist and appending everything, I modified to only append the newly added item instead of doing everything in the array. DOH :P. Thanks for the comment. Also updated to account for multiple buttons. – Ryan Wilson Dec 23 '22 at 18:03
1

Looks correct now. – epascarello Dec 23 '22 at 18:11

epascarello · Answer 2 · 2022-12-23T18:15:15.840

First you redefine items every time so you are resetting it so you are checking against an empty array.

Once you fix that you are looping over the array every time so you will keep adding elements. You only want to append the element you are adding.

// 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>

How not to add duplicate elements in the DOM

2 Answers2