let addMessage = document.querySelector(".todo_text");
let addButton = document.querySelector(".todo_add");
let dealsList = document.querySelector(".todo_items");
let deals = [];
addButton.addEventListener('click',()=>{
let deal = addMessage.value;
addMessage.value = "";
deals.push(deal);
displayDeals();
});
function displayDeals(){
dealsList.innerHTML = "";
for(let i = 0;i<deals.length;i++){
let displayDeal =
`<li class = "item_${i}">
<label>${deals[i]}</label>
<button class = "del_button">X</button>
</li>`;
dealsList.innerHTML+=displayDeal;
let el = document.querySelector(`.item_${i} .del_button`);
console.log(el);
el.addEventListener('click',()=>{
deals.splice(i,1);
displayDeals();
});
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "./css/style.css" rel = "stylesheet"></link>
<script defer src="./script.js"></script>
<title>let`s deal!</title>
</head>
<body>
<div class="topmenu-container">
<ul class="topmenu">
<li><a href="#deal-wheel">Главная</a></li>
<li><a href="#help">Помощь</a></li>
<li><a href="#auth">Вход</a></li>
</ul>
</div>
<div class="content">
<h3 id="deal-wheel">Список выбора</h3>
<div class="todo">
<div class="todo_input">
<input class="todo_text" type="text">
<button class="todo_add">Добавить</button>
</div>
<ul class="todo_items"></ul>
</div>
<div class = "result">
<input class="result_text" type="text">
<button class="getDeal">Рандом!</button>
</div>
<h3 id="help">Помощь</h3>
</body>
</html>
