0
var deleteBtn = document.querySelectorAll('.video-box span');
for (var i = deleteBtn.length - 1; i >= 0; i--) {
    deleteBtn[i].addEventListener('click', deleteVideo);
}

function deleteVideo() {
    var videoBox = document.querySelectorAll('.video-box');
    for (var i = videoBox.length - 1; i >= 0; i--) {
        videoBox[i].remove();
    }
}

Этот кусок кода удаляет все элементы VideoBox, а хотелось бы чтобы удалял только конкретный в котором собственно и нажимаешь на deleteBtn.

3 ответа 3

2

Для поиска ближайшего родителя используем Element.closest().

В this попадает элемент, который вызвал событие.

var deleteBtn = document.querySelectorAll('.video-box span');
for (var i = deleteBtn.length - 1; i >= 0; i--) {
    deleteBtn[i].addEventListener('click', deleteVideo);
}

function deleteVideo() {
    this.closest('.video-box').remove();
}
0

Заменить в цикле var на let

var deleteBtn = document.querySelectorAll('.video-box span');

var videoBox = document.querySelectorAll('.video-box');

for (let i = 0; i < deleteBtn.length; i++) {

  deleteBtn[i].addEventListener('click', function() {

    videoBox[i].remove();

  });
}
<div class="video-box">video-box1 <span>span</span></div>
<div class="video-box">video-box2 <span>span</span></div>
<div class="video-box">video-box3 <span>span</span></div>
<div class="video-box">video-box4 <span>span</span></div>
<div class="video-box">video-box5 <span>span</span></div>

0

Комментарий выше абсолютно верен, но для большей элегантности можно перебирать в данном случае через forEach вместо for, где также можно обратиться к конкретному элементу.

var deleteBtn = document.querySelectorAll('.video-box span');

deleteBtn.forEach(function (btn) {
  btn.addEventListener('click', function () {
    btn.closest('.video-box').remove();
  });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.