Я хочу удалить элемент, который я нажимаю, из DOM и из массива, я выполнил первую часть, она удаляется красиво, но в массиве я не уверен, как настроить таргетинг на этот идентификатор элемента, и вместо этого он просто удалить первое, что есть в массиве?
Я бы предпочел подсказку, чем полный ответ, пожалуйста :)
Заранее спасибо HTML
<!DOCTYPE="html">
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="index.css">
<script src="https://kit.fontawesome.com/c6015819ca.js" crossorigin="anonymous"></script>
<title>To do app in JS</title>
<h1 class='title'>To-do app in JS</h1>
</head>
<body>
<div class='app'>
<div class='header'>
<img src="./images/header.jpg"/>
<div id="date">DATA</div>
<div id="time"></div>
</div>
<div id='listTop'>
<i class="fas fa-sync-alt" id="clear"></i>
<p id='pClear'>Clear All</p>
</div>
<ul id='list'>
</ul>
<div class="footer">
<i class="fas fa-plus-circle" aria-hidden="true" id='addButton'></i>
<input type="text" id='itemInput' placeholder="Add a to-do" />
</div>
</div>
<script src="./index.js"></script>
</body>
JS
function addToDo(toDo, id, done, trash) {
const text =`
<li class="item">
<i class="far fa-check-circle" id='jobComplete'></i>
<div class="description">${toDo}</div>
<i class="fas fa-trash-alt" id='deleteItem'></i>
</li>`;
const position = "beforeend";
list.insertAdjacentHTML(position, text);
}
document.addEventListener("keyup", (event) => {
if(event.keyCode == 13){
const toDo = input.value;
if(toDo) {
addToDo(toDo, id, false, false);
LIST.push(
{
name: toDo,
id: id,
done: false,
trash: false
}
);
console.log(LIST);
id++;
input.value = '';
}
}
})
clear.addEventListener('click', () => {
document.getElementById('list');
list.innerHTML = "";
LIST = [];
id = 0;
console.log(LIST);
}
)
document.getElementById("addButton").addEventListener('click', (event) =>{
const toDo = input.value;
if(toDo) {
addToDo(toDo, id, false, false);
LIST.push(
{
name: toDo,
id: id,
done: false,
trash: false
}
);
id++;
input.value = '';
}
})
function jobCheck () {
};
list.addEventListener("click", event => {
if(event.target.className === "fas fa-trash-alt" ) {
trash = true;
event.target.parentNode.remove();
LIST.splice(event.target, 1);
console.log(LIST);
}
});