Tengo problemas con una aplicación de tareas pendientes. Quiero tachar un elemento LI y agregar un lapso con un signo x. Es fácil cambiando de clase. Sin embargo, cuando "desconecto" la clase haciendo clic nuevamente. La "x" permanece y cuando vuelvo a hacer clic en el elemento, la "x" se duplica. ¿Cómo puedo evitar agregar otra "x" o hacer que la "x" desaparezca cuando los elementos están "desactivados"?
const addButton = document.querySelector("#add"); const input = document.querySelector("input[name='input-item'"); const ul = document.querySelector("ul"); const allItems = document.querySelectorAll("li"); for (let i = 0; i < allItems.length; i++) { allItems[i].addEventListener("click", myList); } function myList() { let temp = this.classList.toggle("red"); if (temp) { let span = document.createElement("span"); span.innerHTML = "×"; span.addEventListener("click", function() { this.parentElement.remove(); }); this.appendChild(span); } else if (this.classList.contains("red")) { this.getElementByTagName("span").remove(); } } .red { text-decoration: line-through; color: red; } span { background-color: white; padding: 0 0.3rem; color: black; margin: 0 0.2rem; display: inline-block; } <div class="container"> <ul> <li>banana</li> <li>orange</li> <li>grapes</li> </ul> <input type="text" name="input-item" placeholder="Enter a new item" /><button id="add">Add Item</button> </div>