При удалении элементов поочередно удаляется только один

Question

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>

Answer 1

Если я правильно понял Вашу задачу и Вам нужно удалить конкретный .profile элемент по нажатию на вложенный в него .profile__delete элемент, то:

const cross = document.querySelectorAll(".profile__delete")    
cross.addEventListener("click", event => {
    event.target.closest(".profile").remove()
}, false)

БЛОГ НА HUSL

При удалении элементов поочередно удаляется только один

Ответы (1 шт):