删除特定标签后的下一个元素答案

【问题标题】：Remove next element after specific tag删除特定标签后的下一个元素
【发布时间】：2019-01-04 09:10:59
【问题描述】：

我正在尝试制作一个“onclick”功能来仅删除特定标签的更接近的元素！

例如：

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

在这种情况下，我必须搜索页面中的所有标签“视频”并仅删除下一个 div（带有“此 div 必须删除”）。并保持 div 与“控件”。所以我必须得到这个结果：

<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 是设置变量。所以我可以使用 ID 和类来调用它们...

【问题讨论】：

您是否尝试将类名添加到要删除的所有 div 然后$("div.Test").remove();？
How can i delete all divs with a certain class name?的可能重复
document.getElementsByTagName("video")[i].parentNode.children[2].remove() or sth like this :)
不清楚是否要删除下一个 div，即使它不是下一个兄弟，还是下一个兄弟，即使它不是一个 div。你要哪个？

标签： javascript dom

【解决方案1】：

也许您可以使用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>

【讨论】：

@TinyGiant — 不容易发现，请参阅Interface NodeList，它被定义为可迭代的。我真的不喜欢当前的“生活标准”，它不会告诉您何时引入功能或版本之间所做的更改（似乎几乎每天都会发布）。
@RobG 谢谢你 - 我已经更新了答案以包含两种情况的解决方案

【解决方案2】：

在现代浏览器中，您可以使用带有 Adjacent sibling combinator 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>

【讨论】：