如何用JavaScript删除包含三个连续<br>的无标识DIV元素

原生JavaScript实现 #

遍历页面所有DIV元素，逐一验证其内容是否符合「仅包含三个<br>标签（无其他文本或元素）」的条件，符合则删除：

// 获取页面所有DIV元素
const allDivs = document.querySelectorAll('div');

allDivs.forEach(div => {
  // 过滤掉DIV内的空白文本节点，只保留元素节点
  const childElements = Array.from(div.childNodes).filter(node => {
    return node.nodeType === Node.ELEMENT_NODE;
  });
  
  // 验证条件：子元素数量为3，且每个都是br标签
  const isTargetDiv = childElements.length === 3 && 
                      childElements.every(el => el.tagName === 'BR');
  
  if (isTargetDiv) {
    div.remove();
  }
});

这段代码会自动忽略DIV内的缩进、换行等空白文本，只检查实际存在的<br>元素数量。

jQuery实现 #

如果项目中使用了jQuery，可以用链式操作快速筛选并删除目标DIV：

$('div').filter(function() {
  // 确认当前DIV的子元素正好是3个br标签
  const $children = $(this).children();
  return $children.length === 3 && $children.filter('br').length === 3;
}).remove();

通过filter方法精准匹配符合条件的DIV，再调用remove()完成删除操作。

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