如何用JavaScript移除父元素中指定的空<p>标签？childNodes方法失效

用户提供的HTML结构：

<div id="Dropdown">
  <label class="podcastLabel" for="touch">
<span>titre</span>
</label>
  <br>
  <p></p>
  <ul class="podcastSlide">
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
  </ul>
</div>

尝试的JS代码（未成功）：

var fDiv = document.getElementById("Dropdown");
fDiv.removeChild(fDiv.childNodes[3]); 

失败原因 #

childNodes会把节点之间的换行、空白字符都解析为文本节点，你指定的索引3对应的并不是目标空<p>标签，自然无法移除。

解决方案 #

方案1：精准定位空<p>标签（推荐） #

使用querySelector结合:empty伪类直接匹配空<p>，然后移除：

const dropdown = document.getElementById("Dropdown");
const emptyPara = dropdown.querySelector("p:empty");
if (emptyPara) {
  emptyPara.remove();
}

:empty会严格匹配没有任何子节点（包括文本节点）的<p>，即使CMS后续注入的空标签结构有小变化，也能准确识别。

方案2：遍历元素节点移除 #

通过children属性获取所有元素节点（不含空白文本节点），遍历判断并移除空<p>：

const dropdown = document.getElementById("Dropdown");
const elementChildren = dropdown.children;

for (let i = 0; i < elementChildren.length; i++) {
  const node = elementChildren[i];
  if (node.tagName === "P" && node.textContent.trim() === "") {
    dropdown.removeChild(node);
    break; // 找到目标后停止遍历，提升效率
  }
}

这种方法兼容性好，还能处理那些可能包含空白字符的“空”<p>标签。

方案3：修正索引（不推荐） #

如果一定要用childNodes，需要准确数出目标节点的索引，但这种方法极度依赖HTML的空白结构，一旦结构变动就会失效：

var fDiv = document.getElementById("Dropdown");
// 实际空<p>的索引是4（前面的空白文本节点占了位置）
fDiv.removeChild(fDiv.childNodes[4]); 

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