En displayLikedPosts hay una función llamada getLikedPosts. esta función getLikedPosts filtra la ID de las publicaciones e inserta publicaciones en una matriz. Ahora, después de ejecutar el bucle forEach dentro de displayLikedPosts, la primera vez agrega una publicación nueva y única ( por ejemplo, publicación-1 ), pero la segunda vez muestra la publicación anterior dos veces y la publicación nueva ( por ejemplo: publicación-1, publicación-1 ,nueva publicación ). Pero mi propósito es mostrar solo la publicación anterior y las publicaciones nuevas (por ejemplo, publicación-1, publicación nueva, publicación nueva2, publicación nueva4 )
code const displayLikedPosts = () => { const likedPosts = getLikedPosts(); likedPosts.forEach((post) => { const div = createPost(post); document.getElementById("liked").appendChild(div); }); };Borre el contenido dentro #liked antes de agregar nuevos elementos
Pseudocódigo
const displayLikedPosts = () => { const likedPosts = getLikedPosts(); document.getElementById("liked")innerHTML = ""; likedPosts.forEach((post) => { const div = createPost(post); document.getElementById("liked").appendChild(div); }); };Primero debe eliminar los elementos secundarios de su nodo DOM principal y luego agregar los elementos nuevamente. Hay muchas formas de eliminar los elementos secundarios, que se analizan en este hilo . Puede encontrar que algunas opciones son mejores (y/o más modernas) que otras.
Aquí hay un pequeño ejemplo mínimo para su caso de uso usando setInterval() para probar que la lista no contiene duplicados.
/** * 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>