Как с помощью querySelector обратиться к элементу html, заданному в скрипте в виде строки?

Вот код (часть объекта view для todo list):

`

function view() {
    const createTodoItem = (data) => {
        const wrapperElement = document.createElement('div');
        wrapperElement.classList.add('col-4');

        wrapperElement.innerHTML = `<div class="taskWrapper">
            <div class="taskHeading">${data.title}</div>
            <div class="taskDescription">${data.description}</div>
            <div class="delete_item">Delete</div>
        </div>`;

        return wrapperElement;
    };

`

Нужно написать код, позволяющий при нажатии на надпись "Delete" удалить весь taskWrapper с веб страницы. Все ошибки, который я получаю при написании кода

`

const del_but = document.querySelector(".delete_item");
const tw = document.querySelector(".taskWrapper");
del_but.addEventListener("click", () => {
tw.classList.add("hide");
        });

`

,связаны с тем, что скрипт не видит div class="delete_item" и div class="taskWrapper", поскольку они здесь заданы, как текст.