如何使用jQuery移除HTML中多余的空闭合与起始div标签

可以实现，但你无法直接选中单个闭合/起始标签。浏览器解析HTML代码时会自动修正不匹配的标签，生成标准化的DOM树，DOM中只有完整的元素节点，不存在独立的起始/闭合标签节点，我们可以通过修正DOM结构的方式抵消冗余标签的影响。

方案1：DOM元素移动法（更推荐） #

实现原理 #

你给出的冗余标签最终会被浏览器解析为：在短描述区块与表单之间多了一层无类名的空div，表单及后续内容都被包裹在这个空div内。我们只需要把空div内的内容移到外层，再删除空div，即可完全抵消两个冗余标签带来的布局影响。该方案不会破坏原有元素绑定的事件，稳定性更高。

实现代码 #

// 选中商品短描述区块元素
const $shortDesc = $('.woocommerce-product-details__short-description');
// 选中短描述区块后的冗余空div
const $extraWrap = $shortDesc.next('div');
// 将空div内的所有子元素移到空div的同级位置
$extraWrap.children().insertBefore($extraWrap);
// 删除冗余的空div
$extraWrap.remove();

方案2：HTML字符串替换法 #

实现原理 #

直接提取父容器的原始HTML字符串，匹配替换掉冗余的标签后重新渲染。该方案会重新解析HTML，原有元素绑定的事件会失效，仅适合对应区域没有绑定自定义事件的场景。

实现代码 #

// 选中短描述区块的父元素
const $parent = $('.woocommerce-product-details__short-description').parent();
// 提取HTML并替换冗余标签
let rawHtml = $parent.html();
rawHtml = rawHtml.replace(/<\/div>\s*<div>\s*(?=<form class="cart")/, '');
// 重新渲染父容器内容
$parent.html(rawHtml);

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