Estoy tratando de hacer una lista de cosas por hacer.
Me las arreglé para hacer que las tareas nuevas aparezcan como elementos de lista <li> dentro de una lista desordenada (con un botón al lado de cada elemento que quiero usar para eliminar este elemento en particular. El problema es que no sé cómo hacerlo). He leído sobre removeChild(), pero parece que solo funciona en el primer o último elemento.
let addTaskToTheList = () => { let task = document.getElementById("task_input_field").value; let list = document.getElementById("to-do_list"); list.innerHTML += `<li>${task}</li><button type="button"onclick="deleteTask()">X</button>` }Seleccione el elemento li correcto usando event.currentTarget.closest("li") y retírelo del selector.
violín de trabajo
let addTaskToTheList = () => { let task = document.getElementById("task_input_field").value; let list = document.getElementById("to-do_list"); list.innerHTML += `<li>${task}<button type="button"onclick="deleteTask(event)">X</button></li>` } function deleteTask(event) { const target = event.currentTarget.closest("li"); document.getElementById("to-do_list").removeChild(target) } <input type="text" id="task_input_field"> <button onclick="addTaskToTheList()">Add</button> <ul id="to-do_list"></ul>