how to stop repetition of previous post

Question

In the displayLikedPosts there is a function called getLikedPosts. this getLikedPosts function filter the posts ID and insert posts into an array. Now after running forEach loop inside the displayLikedPosts ---first time it adds a new and single post(ex:post-1) but second time it displays the previous post twice and the new post (ex: post-1,post-1,newpost). But my purpose is to display only the previous one and the new posts(ex:post-1,newpost,newpost2,newpost4)

code

        const displayLikedPosts = () => {
              const likedPosts = getLikedPosts();
 
              likedPosts.forEach((post) => {
              const div = createPost(post);
              document.getElementById("liked").appendChild(div);

              });
            };

Empty the #liked div before re-adding the elements of query it to not re-add duplicates? — Benjamin Gruenbaum, Mar 21 '22 at 12:38

score 0 · Answer 1 · answered Mar 21 '22 at 12:43

0

Clear thr content inside #liked before appending new elements

Pseudo Code

const displayLikedPosts = () => {
    const likedPosts = getLikedPosts();
    document.getElementById("liked")innerHTML = "";
    likedPosts.forEach((post) => {
        const div = createPost(post);
        document.getElementById("liked").appendChild(div);
    });
};

answered Mar 21 '22 at 12:43

Nitheesh

19,238
3
22
49

its working thanks mate – Nafiz Imtiaz Mar 21 '22 at 12:46
Please approve the answer if this works for you. – Nitheesh Mar 21 '22 at 12:48

score 0 · Answer 2 · answered Mar 21 '22 at 12:50

You must first delete the children of your parent DOM node, then add the elements again. There are many ways to delete the children, which are discussed in this thread. You may find that some options are better (and/ or more modern) than others.

Here is a small minimal example for your use case using setInterval() to prove that the list does not contain duplicates.

/**
 * Display posts
 * @param {string[]} posts posts to display
 */
function displayPosts(posts) {
  const parent = document.getElementById("liked");

  // delete children
  deleteChildren(parent);
  
  // add items to the list
  posts.forEach((post) => {
    const listItem = document.createElement("li");
    listItem.textContent = post;
    parent.appendChild(listItem);
  });
  console.log("rendered")
}

/**
 * Deletes all children of a DOM node.
 * @param {HTMLElement} parent parent element
 */
function deleteChildren(parent) {
  while (parent.firstChild) {
    parent.firstChild.remove();
  }
}

window.addEventListener("DOMContentLoaded", (event) => {
  // posts to display
  const posts = ["post 1", "post 2", "post 3", "post 4"];

  displayPosts(posts)
  // call method every 3 seconds to demonstrate it works
  setInterval(() => displayPosts(posts), 3 * 1000);
});

<ul id="liked">

</ul>

how to stop repetition of previous post

2 Answers2