How to delete an item on click from dynamically generated content javascript

Question

I am working on a very basic task application with vanilla javascript. I have an array and from that, I am rendering the todos dynamically. I want to delete a todo when the checkbox is clicked.

I tried to create a form with the id of the todo in the hidden input and on change event submit the form and delete the todo but I'm generating all of them dynamically. Don't you think it will be a lot of code?

Is there a better way to do this?

Thank you

 const todos = ['Complete the todo app', 'Write a script', 'Record a video', 'Publish the video'] const renderTodos = function (todos) { document.querySelector('#todos').innerHTML = '' todos.forEach(function (todo, index) { const divElem = document.createElement('div') divElem.classList.add(`item`, `item-${index}`) document.querySelector('#todos').appendChild(divElem) const checkboxElem = document.createElement('input') checkboxElem.type = 'checkbox' checkboxElem.name = 'deleteTodo' document.querySelector(`.item-${index}`).appendChild(checkboxElem) const titleElem = document.createElement('p') titleElem.textContent = todo document.querySelector(`.item-${index}`).appendChild(titleElem) }) } renderTodos(todos) document.querySelector('#add-todo').addEventListener('submit', function (e) { e.preventDefault() if (e.target.elements.newItem.value === '') { return } todos.push(e.target.elements.newItem.value) e.target.elements.newItem.value = '' renderTodos(todos) })

 <div id="todos"></div> <form class="item" id="add-todo" action=""> <input type="text" name="newItem" placeholder="New Item" autocomplete="off" /> <button type="submit" name="list">+</button> </form>

Answer 1

use remove method:

 const DomParser = new DOMParser(), todoAll = document.getElementById('todos'), todoForm = document.getElementById('add-todo'), todos = ['Complete the todo app', 'Write a script', 'Record a video', 'Publish the video']; function todoAdding(todo, index) { let elmZ = `<div class="item item-${index}"><input type="checkbox" name="deleteTodo"><p>${todo}</p></div>`; let inZ = DomParser.parseFromString( elmZ, 'text/html'); todoAll.appendChild( inZ.body.firstChild ) } function renderTodos(todos) { document.querySelector('#todos').innerHTML = '' todos.forEach( todoAdding ) } todoForm.onclick = e => { e.preventDefault() if (todoForm.newItem.value === '') return todos.push(todoForm.newItem.value) todoForm.newItem.value = '' renderTodos(todos) } todoAll.onclick = e => { if (.e.target.matches('input[type=checkbox]')) return let suppIndex = todos.findIndex(todo=>todo===e.target.parentNode.querySelector('p').textContent) todos,splice(suppIndex.1) e.target.parentNode.remove() } renderTodos(todos) // initial case

 <div id="todos"></div> <form class="item" id="add-todo" action=""> <input type="text" name="newItem" placeholder="New Item" autocomplete="off" /> <button type="submit" name="list">+</button> </form>