Удаление списка в тудушке
Всем привет! начал писать тудушку по примеру из урока, уже половину сделал по-своему, но никак не пойму одну вещь. Добавил кнопку удалить элемент, работает только для новых элементов. Для старых, которые хранятся в HTML документе, даже в консоль лог по нажатию ничего не выдает. Помогите, пожалуйста) так же, если где-то еще найдется косяк - принимаю всю критику:)
<!DOCTYPE html>
<html>
<head>
<title>Приложение To-Do List</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="todo">
<h1>Мой список дел <i id="pensil" class="fas fa-pencil-alt"></i></h1>
<input type="text" placeholder="Добавить список">
<button type="text">Добавить</button>
<ul class="todos">
<li>
<span calss="todo-text">
Прикрутить добавление по ентер
</span>
<span class="todo-trash">
<button class="trash" type="text"></button>
</span>
</li>
<li>
<span calss="todo-text">
добавить кнопку к инпут
</span>
<span class="todo-trash">
<button class="trash" type="text"></button>
</span>
</li>
</ul>
<div id="buttons">
<button class="save">Сохранить</button>
<button class="clear">Очистить</button>
<button class="showTips">Справка</button>
</div>
</div>
<div id = "overlay">
<a href="javascript:void(0)" class="closeTips">×</a>
<ul class="tips">
<li>Чтобы спрятать или показать поле ввода, кликните на карандаш</li>
<li>Для добавления списка дел напишите текст в поле ввода и нажмите Ввод</li>
<li>Чтобы удалить один пункт, наведите на него и нажмите на значок корзины</li>
<li>Чтобы удалить все списки дел, нажмите "Очистить"</li>
<li>Нажмите "Сохранить", чтобы сохранить список дел на потом</li>
</ul>
</div>
<script type="text/javascript" src="index.js"> </script>
</body>
</html>
'use strict';
function ToDo() {
const input = document.querySelector("input[type='text']");
const inputBtn = document.querySelector("button[type='text']");
const ul = document.querySelector("ul.todos");
// const delBtn = document.querySelector("input.trash");
// const saveButton = document.querySelector("button.save");
// const clearButton = document.querySelector("button.clear");
// const showTipsButton = document.querySelector("button.showTips")
// const closeTipsButton = document.querySelector("a.closeTips");
// const overlay = document.querySelector("#overlay");
function todoAdd() {
const li = document.createElement('li');
const textSpan = document.createElement("span");
textSpan.classList.add("todo-text");
const newTodo = input.value;
textSpan.append(newTodo);
const deleteButton = document.createElement('span');
deleteButton.classList.add("todo-trash");
const button = document.createElement("button");
button.classList.add("trash");
deleteButton.appendChild(button);
ul.appendChild(li).append(textSpan, deleteButton);
input.value = " ";
listenDeleteTodo(deleteButton);
}
inputBtn.addEventListener('click', (clicked) => {
if (clicked && input.value.length != 0) {
todoAdd();
}
})
function listenDeleteTodo(element) {
element.addEventListener("click", (event) => {
element.parentElement.remove();
event.stopPropagation();
console.log('click');
});
}
}
document.addEventListener("DOMContentLoaded", ToDo);
CSS: Код:
button.trash::after { |
bizunowvova,
медитируйте построчно)))
<!DOCTYPE html>
<html>
<head>
<title>Приложение To-Do List</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
button.trash::after {
content: "Del";
}
</style>
</head>
<body>
<div id="todo">
<h1>Мой список дел <i id="pensil" class="fas fa-pencil-alt"></i></h1>
<input type="text" placeholder="Добавить список" class="title">
<button type="text" class="add">Добавить</button>
<ul class="todos">
<li>
<span calss="todo-text">
Прикрутить добавление по ентер
</span>
<span class="todo-trash">
<button class="trash" type="text"></button>
</span>
</li>
<li>
<span calss="todo-text">
добавить кнопку к инпут
</span>
<span class="todo-trash">
<button class="trash" type="text"></button>
</span>
</li>
</ul>
<div id="buttons">
<button class="save">Сохранить</button>
<button class="clear">Очистить</button>
<button class="showTips">Справка</button>
</div>
</div>
<div id="overlay">
<a href="javascript:void(0)" class="closeTips">×</a>
<ul class="tips">
<li>Чтобы спрятать или показать поле ввода, кликните на карандаш</li>
<li>Для добавления списка дел напишите текст в поле ввода и нажмите Ввод</li>
<li>Чтобы удалить один пункт, наведите на него и нажмите на значок корзины</li>
<li>Чтобы удалить все списки дел, нажмите "Очистить"</li>
<li>Нажмите "Сохранить", чтобы сохранить список дел на потом</li>
</ul>
</div>
<script>
'use strict';
function ToDo() {
const input = document.querySelector("input.title");
const addBtn = document.querySelector("button.add");
const ul = document.querySelector("ul.todos");
ul.querySelectorAll('li').forEach(li => listenDeleteTodo(li.querySelector('.todo-trash'), li));
function todoAdd() {
const li = document.createElement('li');
const textSpan = document.createElement("span");
textSpan.classList.add("todo-text");
const newTodo = input.value;
textSpan.append(newTodo);
const deleteButton = document.createElement('span');
deleteButton.classList.add("todo-trash");
const button = document.createElement("button");
button.type = 'text';
button.classList.add("trash");
deleteButton.appendChild(button);
ul.appendChild(li).append(textSpan, deleteButton);
input.value = "";
listenDeleteTodo(deleteButton, li);
}
addBtn.addEventListener('click', () => {
if (input.value.trim().length) {
todoAdd();
}
})
function listenDeleteTodo(button, li) {
button.addEventListener("click", () => {
li.remove();
console.log('remove');
});
}
}
document.addEventListener("DOMContentLoaded", ToDo);
</script>
</body>
</html>
|
рони,
Спасибо большое! |
| Часовой пояс GMT +3, время: 00:21. |