jQuery/JS实现：删除指定父元素内首个div及目标div的前序兄弟div

给定的HTML结构如下：

<div class="foobar">
   <p></p>
   <div> first stuff</div>
   <div class="sec"> second stuff </div>
   <!-- 其他内容 -->
</div>

1. 删除class为foobar的父div内的第一个<div>元素 #

jQuery 实现 #

如果要匹配.foobar下所有后代中的第一个div：

$('.foobar div:first').remove();

如果需要精准匹配.foobar的直接子元素中的第一个div（避免匹配嵌套在其他元素里的div）：

$('.foobar > div:first').remove();

原生JavaScript 实现 #

匹配所有后代中的第一个div：

const foobar = document.querySelector('.foobar');
const firstDiv = foobar.querySelector('div');
if (firstDiv) firstDiv.remove();

精准匹配直接子元素中的第一个div：

const foobar = document.querySelector('.foobar');
const directFirstDiv = foobar.querySelector(':scope > div');
if (directFirstDiv) directFirstDiv.remove();

2. 删除class为sec的<div>元素之前的第一个兄弟<div>元素 #

jQuery 实现 #

直接匹配.sec紧挨着的前一个div兄弟元素并删除：

$('.sec').prev('div').remove();

原生JavaScript 实现 #

如果不确定前一个兄弟是不是div，循环查找最近的前一个div兄弟：

const secDiv = document.querySelector('.sec');
let prevSibling = secDiv.previousElementSibling;
while (prevSibling) {
  if (prevSibling.tagName === 'DIV') {
    prevSibling.remove();
    break;
  }
  prevSibling = prevSibling.previousElementSibling;
}

如果确定紧挨着的前一个兄弟就是div，可以简化：

const secDiv = document.querySelector('.sec');
const immediatePrevDiv = secDiv.previousElementSibling;
if (immediatePrevDiv && immediatePrevDiv.tagName === 'DIV') {
  immediatePrevDiv.remove();
}

内容的提问来源于stack exchange，提问作者pstein