Удалить следующий элемент после определенного тега

Question

Я пытаюсь сделать функцию "onclick", чтобы удалить только более близкий элемент определенного тега!

Например:

<div>
    <video src="path/video.mp4"></video>
    <div>This div must be removed</div>
    <div>Controls</div>
</div>

В этой ситуации я должен искатьдля всех тегов «видео» на странице и удалите только следующий div (с «этот div должен быть удален»).И держите div с помощью «control».Таким образом, я должен получить следующее:

<div>
    <video src="path/video.mp4"></video>
    <div>Controls</div>
</div>

. То, что я делаю, я потерял все:

function remove() {

    var videos = document.getElementsByTagName("video");
    for (var i=0;i<videos.length;i+=1){
          var classe = videos[i].getAttribute("class");

          parentDiv = videos[i].parentNode;
          var classParent = parentDiv.getAttribute("class");
          var arrayClassParent = classParent.split(' ');
          var classParent = arrayClassParent[0];
          var divVideo = document.getElementsByClassName(classParent)[0];

          var cntnt = document.getElementsByClassName(classParent)[i];
          while (cntnt.childNodes.length > 1) {
            cntnt.removeChild(cntnt.lastChild);
          }     
    }
}

Примечание: класс div и ID задаются как переменные.Я могу позвонить им, используя идентификаторы и классы ...

Answer 1

В современных браузерах вы можете выбрать селектор с помощью смежного братского комбинатора video + div, чтобы выбрать элементы div, которые следуют сразу за видеоэлементом, например

function removeDivs() {
  document.querySelectorAll('video + div').forEach(div => div.parentNode.removeChild(div));
}

video {height: 10px; border: 1px solid red;}

<div>
    <video src="path/video.mp4"></video>
    <div>This div must be removed</div>
    <div>Controls</div>
</div>
<div>
    <video src="path/video.mp4"></video>
    <div>This div must be removed</div>
    <div>Controls</div>
</div>
<button onclick="removeDivs()">Remove divs</button>

Answer 2

Возможно, вы могли бы использовать поле nextElementSibling для доступа и удаления элемента непосредственно после каждого video в вашем документе?Так что что-то вроде этого может работать для вас:

function removeElementNextToVideo() {

  // Query for all video elements in document
  for(const video of document.body.querySelectorAll('video')) {

    // For each video, check for and remove the element directly 
    // after (next) to it
    if(video.nextElementSibling) {

        video.nextElementSibling.remove();
    }
  }
}

removeElementNextToVideo();

<div>
  <video src="path/video.mp4"></video>
  <div>This div must be removed</div>
  <div>Controls</div>
</div>

Кроме того, если вы хотите удалить следующий элемент, только если это DIV, вы можете сделать следующее:

function removeDivNextToVideo() {

  // Query for all video elements in document
  for(const video of document.body.querySelectorAll('video')) {

    // For each video, check for and remove the element directly 
    // after (next) to it only if the element is a DIV
    if(video.nextElementSibling && video.nextElementSibling.tagName === 'DIV') {

        video.nextElementSibling.remove();
    }
  }
}

removeDivNextToVideo();

<div>
  <video src="path/video.mp4"></video>
  <h4>H4 directly after video, so nothing gets removed</h4>
  <div>This div must be removed</div>
  <div>Controls</div>
</div>