Avoiding the inclusion of repetitive elements in the DOM

Question

Avoiding the inclusion of repetitive elements in the DOM

I am facing a simple issue that I can't seem to figure out. I have written a function that adds an element to an Array, and then uses a forEach loop to append them to the DOM. However, I'm struggling to avoid adding 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>

My attempts 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!!

javascript arrays drop-duplicates

Answer 1

Answer №1

items should have a global scope by being declared outside of the function. Currently, it is being initialized as an empty array inside the function on each call, causing it to lose track of existing items. Additionally, make sure to include a return statement in your function when the value is already in the array. I also made adjustments for multiple buttons by adding 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>

Answer 2

items should have a global scope by being declared outside of the function. Currently, it is being initialized as an empty array inside the function on each call, causing it to lose track of existing items. Additionally, make sure to include a return statement in your function when the value is already in the array. I also made adjustments for multiple buttons by adding 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>

Answer 3

Answer №2

Make sure to redefine items only once, instead of every time, to avoid resetting it and checking against an empty array.

When looping over the array, remember to only append the element you are adding to prevent adding duplicate elements.

// Improved example with multiple buttons
const btns = document.querySelectorAll("button");
btns.forEach(btn => {
  btn.addEventListener("click", () => {
    addItem(btn.innerText);
  });
});

// Separated out the rendering code for reusability in other places
function renderItem(innerText) {
  const li = Object.assign(document.createElement("li"), {
    innerText
  });
  document.querySelector("#out").appendChild(li);
}

// Declare items outside the method to retain values
// Included default values for demonstration
const items = ["d1", "d2"];

// Render items from the array, useful for default or localstorage data
items.forEach(renderItem);

// Function triggered by click event to add items to UI
function addItem(item) {
  // Check if item already exists, exit if true
  if (items.includes(item)) return;

  // Add the new item
  items.push(item);

  // Display the added item
  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>

Answer 4

Make sure to redefine items only once, instead of every time, to avoid resetting it and checking against an empty array.

When looping over the array, remember to only append the element you are adding to prevent adding duplicate elements.

// Improved example with multiple buttons
const btns = document.querySelectorAll("button");
btns.forEach(btn => {
  btn.addEventListener("click", () => {
    addItem(btn.innerText);
  });
});

// Separated out the rendering code for reusability in other places
function renderItem(innerText) {
  const li = Object.assign(document.createElement("li"), {
    innerText
  });
  document.querySelector("#out").appendChild(li);
}

// Declare items outside the method to retain values
// Included default values for demonstration
const items = ["d1", "d2"];

// Render items from the array, useful for default or localstorage data
items.forEach(renderItem);

// Function triggered by click event to add items to UI
function addItem(item) {
  // Check if item already exists, exit if true
  if (items.includes(item)) return;

  // Add the new item
  items.push(item);

  // Display the added item
  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>

Avoiding the inclusion of repetitive elements in the DOM

Answer №1

Answer №2

Similar questions

Creating a gaming application with Phaser.js and Ionic with subpar rendering capabilities

What do I do when I get a "findByIdAndUpdate is not a function" error from my controller after requiring the model

Separate individual digits from a number and assign them to an array

wrap <td> data in a link with vue depending on certain conditions

Implementing Angular's ngModel directive within an conditional statement

Error: Unable to access 'map' property of an undefined variable in ReactJS

Error: Failed to parse the given color specification

Discovering whether x is equal to any value within an array using JavaScript

Discover the best approach for transforming a complicated JSON object/array into a map using inheritance coding techniques

Experiencing difficulty navigating the operations of insertion, deletion, and search within a string array concurrently

Guide to extracting a sub-string array from a string array in C#

Ways to implement the data from xmlhttp.responseText

Creating a pop-up window displaying event details when a user hovers over or clicks on an event in fullcalendar using JavaScript

Alert: An issue was encountered with React instrumentation: Error: It is advised that the children do not change when passing in the same set - nextjs

Detecting text overflow with ellipsis in HTML

Error: The cordovaLocalNotification plugin is attempting to read a property 'plugins' that is undefined, resulting in a TypeError

Encountering Issues with Script functionality on secure websites

How can I determine the appropriate time to hide the loading screen after the model has been loaded with gltfLoader and before the scene is rendered?

Error: Cannot locate 'import-resolver-typescript/lib' in jsconfig.json file

Utilizing the Google Translate API within an ASP MVC framework to translate a div's content from English to Arabic