нахождение родителя родителя элемента DOM

[Vadim1616]

Здравствуйте, есть вот такой 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.

[Malleys]

<template id="list-template">
	<div class="list" id="list" style="margin: 1em;">
		<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">Delete<i class="fas fa-trash"></i></button>
				<input type="checkbox" class="task-follow">
			</div>
		</div>
	</div>
</template>
<button id="add-button">Add</button>
<script>
	var i = 1;

	// пример добавления
	document.getElementById("add-button").addEventListener("click", function(event) {
		var list = document.getElementById("list-template").content.cloneNode(true);
		list.querySelector(".task-header").textContent += "#" + i++;
		document.body.appendChild(list);
	});
	
	// пример обработки события 
	document.addEventListener("click", function(event) {
		if(event.target.matches(".list .task-delete")) {
			event.target.closest(".list").remove();
		}
	});
</script>