リストの中のチェックボックス項目を削除する

Question

私は、入力を受け取り、その下にあるチェックリストを使ってテキストを表示します。私はアイテムを削除する各アイテムにボタンを追加する方法を理解しようとしています。

function onReady() { 
 
    const addToDoForm = document.getElementById('addToDoForm'); 
 
    const newToDoText = document.getElementById('newToDoText'); 
 
    const toDoList = document.getElementById('toDoList'); 
 

 
    addToDoForm.addEventListener('submit', event => { 
 
    event.preventDefault(); 
 

 
    let title = newToDoText.value; 
 
    let newLi = document.createElement('li'); 
 
    let checkbox = document.createElement('input'); 
 
    checkbox.type = "checkbox"; 
 
    newLi.textContent = title; 
 
    newLi.appendChild(checkbox); 
 
    toDoList.appendChild(newLi); 
 
    newToDoText.value = ''; 
 
    }); 
 
} 
 

 
window.onload = function() { 
 
    alert("The window has loaded!"); 
 
    onReady(); 
 
};

<form id="addToDoForm"> 
 
    <label for="newToDoText">New To-Do:</label> 
 
    <input type="text" id="newToDoText"> 
 
    <button type="submit">Add To-Do!</button> 
 
</form> 
 

 
<ul id="toDoList"> 
 

 
</ul> 
 

 
<script src="app.js"></script>

Answer 1

ただ、この場合には、ボタンを別の要素を作成する必要があり、親要素を削除する場合にクリックハンドラを追加します。

function onReady() { 
    const addToDoForm = document.getElementById('addToDoForm'); 
    const newToDoText = document.getElementById('newToDoText'); 
    const toDoList = document.getElementById('toDoList'); 

    function onDelete(e) { 
    e.target.parentElement.outerHTML = ""; 
    } 

    addToDoForm.addEventListener('submit', event => { 
    event.preventDefault(); 

    let title = newToDoText.value; 
    let newLi = document.createElement('li'); 
    let checkbox = document.createElement('input'); 
    let del = document.createElement('button'); 
    del.textContent = "delete"; 
    del.onclick = onDelete; 
    checkbox.type = "checkbox"; 
    newLi.textContent = title; 
    newLi.appendChild(checkbox); 
    newLi.appendChild(del); 
    toDoList.appendChild(newLi); 
    newToDoText.value = ''; 
    }); 
} 

window.onload = function() { 
    alert("The window has loaded!"); 
    onReady(); 
};