Как создать кнопку удаления блока?

Question

вовчек @vovvkka

JavaScript

Как создать кнопку удаления блока?

Есть приложение, в котором ты выбираешь дату, страну, текст. Нажимаешь на кнопку, и все эти данные добавляются в блок, который создается и добавляется в разметку. Но нужно сделать кнопку удаления, при нажатии на нее будет удаляться именно тот блок, в котором хранится эта кнопка.

В переменной dateOfMessage хранится дата, id поста и страна. Рядом с ней должна быть кнопка.

<div id="container">
    <div class="content">
        <div class="content-messages"></div>

        <div class="content-send">
            <div class="content-send-data">
                <div class="content-send-data-selectCountry">
                    <label for="countries">Country</label>
                    <select name="countries" id="countries">
                        <option value="title">Select country</option>
                    </select>
                </div>

                <div class="content-send-data-selectDate">
                    <label for="date">Date</label>
                    <input type="date" id="date">
                </div>

            </div>
            <div class="content-send-message">
                <textarea placeholder="Message"></textarea>
            </div>
            <div class="content-send-submit">
                <button id="send-button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 12l11 3.1 7-8.1-8.156 5.672-4.312-1.202 15.362-7.68-3.974 14.57-3.75-3.339-2.17 2.925v-.769l-2-.56v7.383l4.473-6.031 4.527 4.031 6-22z"/></svg>
                </button>
            </div>
        </div>
    </div>
</div>

document.addEventListener('DOMContentLoaded', () => {
    const sel = document.querySelector('#countries');
    const date = document.querySelector('#date');
    const message = document.querySelector('textarea');
    const sendButton = document.querySelector('#send-button');
    const messagesBlock = document.querySelector('.content-messages');

    let getData = localStorage.getItem('data');

    let data = getData ? JSON.parse(getData) : [];
    console.log(data);

    if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
            const messages = document.querySelector('.content-messages');

            const textMessage = document.createElement('div');
            textMessage.classList.add('content-messages-post');

            const dateOfMessage = document.createElement('p');
            dateOfMessage.innerHTML = `Post <b>#${data[i].id}</b> at <b>${data[i].date}</b> being in: <b>${data[i].country}</b>`;

            const textOfMessage = document.createElement('p');
            textOfMessage.innerHTML = `${data[i].text}`;

            textMessage.append(dateOfMessage);
            textMessage.append(textOfMessage);
            messages.appendChild(textMessage);
        }
    }

    const createNewPost = () => {
        data.push({
            id: data.length + 1,
            country: sel.value,
            date: date.value,
            text: message.value
        });

        const textMessage = document.createElement('div');
        textMessage.classList.add('content-messages-post');

        const dateOfMessage = document.createElement('p');
        dateOfMessage.innerHTML = `Post <b>#${data.length}</b> at <b>${date.value}</b> being in: <b>${sel.value}</b>`;

        const textOfMessage = document.createElement('p');
        textOfMessage.innerHTML = `${message.value}`;

        textMessage.append(dateOfMessage);
        textMessage.append(textOfMessage);
        messagesBlock.appendChild(textMessage);
    };

    sendButton.addEventListener('click', () => {
        if (sel.value !== "title" && date.value !== '' && message.value !== '') {
            createNewPost();
        } else {
            alert('Заполните все поля.');
        }

        localStorage.setItem('data', JSON.stringify(data));
    });
});