Soy muy nuevo en JS, HTML y CSS. He buscado muchas respuestas, pero no puedo entender el contexto cuando se aplica a mi situación. El botón 2 es lo que necesita la función onClick, pero no estoy seguro de cómo implementar el aspecto de tachado. ¡Gracias!
Mi JS va de la siguiente manera:
window.onload = function() { document.getElementById("submit-btn").addEventListener("click", function() { let text = document.getElementById("text-box").value; let li = document.createElement("li"); li.id = "liId"; li.innerText = text; document.getElementById("unordered-list").appendChild(li); let button = document.createElement("button"); button.innerText = "X"; button.setAttribute = ("id", "b1"); li.appendChild(button); button.addEventListener("click", () => li.parentNode.removeChild(li)); document.getElementById("unordered-list").appendChild(li); let button2 = document.createElement("button"); button2.innerText = "Done"; button2.id = "b2"; li.appendChild(button2); li.appendChild(button); li.appendChild(button2); }); document.getElementById("b2").addEventListener("click", function () { document.getElementById("liId").style = "text-decoration: line-through;" }); }HTML:
<html lang="en"> <head> <link rel="stylesheet" href="style.css" /> <title>My First Project</title> </head> <body> <script src="script.js"></script> <header id="to-do-box"> <h1>To-Do List</h1> <div id="top-half"> <form> <input type="text" id="text-box" placeholder="Add an item!"> <button type="button" id="submit-btn">Submit</button> <button type="button" id="clear-field-btn">Clear field</button> </form> </div> </header> <div id="ul"> <ul id="unordered-list"></ul> </div> </body> </html>Puede hacer esto implementando un detector de eventos que se activa al hacer clic en el botón. Esto eliminará el primer elemento de la lista que se muestra.
document.getElementById("submit-btn").addEventListener("click", function() { let text = document.getElementById("text-box").value; let li = document.createElement("li"); li.setAttribute = ("id", "list"); li.id = "liId"; li.innerText = text; document.getElementById("unordered-list").appendChild(li); let button = document.createElement("button"); button.innerText = "X"; button.setAttribute = ("id", "b1"); li.appendChild(button); button.addEventListener("click", () => li.parentNode.removeChild(li)); document.getElementById("unordered-list").appendChild(li); let button2 = document.createElement("button"); button2.innerText = "Done"; button2.id = "b2"; button2.classList.add('buttonClass'); li.appendChild(button2); li.appendChild(button); li.appendChild(button2); document.querySelectorAll('.buttonClass').forEach(item => { item.addEventListener('click', event => { change() })})}); function change() { document.querySelectorAll("#b2").forEach(item => { item.parentNode.style = "text-decoration: line-through;" })} document.getElementById("clear-field-btn").addEventListener('click', event => { document.querySelectorAll("#b2").forEach(item => { item.parentNode.remove(); }) }) <html> <body> <header id="to-do-box"> <h1>To-Do List</h1> <div id="top-half"> <form> <input type="text" id="text-box" placeholder="Add an item!"> <button type="button" id="submit-btn">Submit</button> <button type="button" id="clear-field-btn">Clear field</button> </form> </div> </header> <div id="ul"> <ul id="unordered-list"></ul> </div> </body> </html> Sin embargo, tenga en cuenta que esto solo funcionará para uno de los elementos de la lista, si desea descartar todos los elementos de la lista si el usuario tiene varios, deberá utilizar una función forEach .