Нужно удалять поочередно элементы, но удаляется только один

Я так понял, что нужно добавлять скопированный и отредактированный массив, но не знаю как

let deleteProfile = document.querySelector('.profile')
    let cross = document.querySelectorAll('.profile__delete')

for (let element of cross) {
    element.onclick = () => deleteProfile.remove()
}




<section class="list">
    <div class="container">
        <div class="list__inner">
            @foreach ($data as $element)
            <div class="profile">
                <ul>
                    <li class="profile__fild">
                        <div class="profile__number">{{ $element->id }}</div>
                    </li>
                    <li class="profile__name">{{ $element->name }}</li>
                    <li class="profile__city">{{ $element->city }}</li>
                    <li class="profile__age">{{ $element->age }}</li>
                    <li class="profile__specialty">{{ $element->specialty }}</li>
                    <li><a class="profile__write" href="#">Написать</a></li>
                    <li><a class="profile__call" href="#">Позвонить</a></li>
                    <li><div class="profile__delete"></div></li>
                </ul>
            </div>
            @endforeach
        </div>
    </div>
</section>