Здравствуйте, есть вот такой HTML:
<div class="list" id="list">
<div class="task" id="task">
<div class="task-txt">
<div class="task-header">Lorem</div>
<div class="task-description">Lorem ipsum dolor sit amet</div>
</div>
<div class="task-buttons">
<input type="button" class="task-done" value="done">
<button class="task-edit"><i class="fas fa-edit"></i></button>
<button class="task-delete" id="delete"><i class="fas fa-trash"></i></button>
<input type="checkbox" class="task-follow">
</div>
</div>
</div>
эта конструкция генерируется по нажатию на кнопку и ее нет в изначальном DOM.
мне нужно, чтобы при нажатии на <button class="task-delete" id="delete"> эта конструкция удалялась, но я не могу разобраться как правильно найти родителя родителя button, тобишь <div class="task" id="task">.
var list = getElementById("list");
task.onclick = function(event){
var target = event.target;
var task = getElementById("task");
if(target.id == "delete"){
this.removeChild(task);
}
}
Это все что у меня получается, но оно удаляет не тот блок task, в котором находиться нажатая кнопка, а первый из таких же блоков task в блоке list.