How do I delete a certain task after a complete button from that same task is deleted?

So basically I’m making a task management system, but I can’t seem to figure out how to check if a specific button was pressed from a task, and delete that same task with the button that was pressed.
Here’s my code:


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-do List App</title>
    <link rel="stylesheet" href="style.css">
    <div class="header">
        <h1>To-do list app</h1>
        <p>An amazing to-do list application</p>
    <div class="add-new-container">
        <h3>Add new Task</h3>
        <input type="text" placeholder="Description..">
        <button id="add-new-btn">Add Task</button>
    <div class="tasks-container">
        <!-- <div class="task">
            <p>[EX] Wash the dog</p>
        </div> -->
    <script src="main.js"></script>


    document.querySelector("#add-new-btn")?.addEventListener("click", function() {
        const iValue = document.querySelector("input")?.value;
        if (iValue == "") {
            console.warn("All fields must be filled out");
            alert("Please enter a task description!");
        } else {
            const taskDiv = document.createElement("div");
            taskDiv.className = "task"
            const taskDesc = document.createElement("p");
            taskDesc.innerHTML = iValue;
            const taskCompBtn = document.createElement("button")
            taskCompBtn.textContent = "Complete"
   = "compBtn"

            const taskContainer = document.querySelector(".tasks-container");
    document.querySelector("#compBtn").addEventListener("click", function() {
        console.log('Completed task')

I've tried using an id in the past, and assigning an id to each task, but I wasn't quite sure how to check the id's properly (if that makes sense).