У меня есть этот простой список дел, который принимает некоторый ввод, а затем под ним, он показывает текст с флажком рядом с ним. Я пытаюсь выяснить, как добавить кнопку для каждого элемента, который удаляет элемент.
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>
Просто нужно создать другой элемент, в данном случае кнопку, и добавить обработчик клика для удаления родительского элемента.
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();
};
e.target.parentElement.outerHTML = "";
-> e.target.parentElement.remove();