JavaScript按类名移除元素及对应空父节点（避免误删主容器）

针对你的HTML结构和需求，我这里有几个精准且安全的实现方案，既能移除目标类的元素，又能同时清理掉img所在的空p标签，还不会误删主div容器：

方案1：利用结构关联性批量删除（适合固定结构） #

因为你的结构是带目标类的p紧跟包含同类img的p，可以直接选中这两个元素一起删除：

// 选中带类名的p，加上它紧邻的下一个p，一次性移除
$('.legends .update_villages_2013').add($('.legends .update_villages_2013').next('p')).remove();

这个方法简单高效，完全贴合你当前的HTML结构，不会留下任何空标签。

方案2：遍历元素安全处理（适合结构可能变化的场景） #

如果未来结构有调整，或者需要更通用的逻辑，可以遍历所有目标类元素，判断类型后处理：

$('.legends .update_villages_2013').each(function() {
  const $currentElem = $(this);
  // 如果当前元素是img，就删除它的父p（仅当父元素是p时）
  if ($currentElem.is('img')) {
    $currentElem.parent('p').remove();
  } else {
    // 如果是带类名的p，直接删除自身
    $currentElem.remove();
  }
});

这里用parent('p')做了精准匹配，只会删除img的直接父p标签，绝对不会误删主div容器，比直接用原生parentNode更安全。

执行后的预期HTML结构 #

执行任意一种方案后，你的HTML会变成：

<div id="basedata-legend-land" class="legends"> 
  <p class="district_boundaries">District Boundaries</p> 
  <p><img src="url" alt="legend" class="district_boundaries"></p> 
</div>

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