从javascript中删除父节点

Question

我有一个类似以下的div

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

正如您所看到的，我为p元素使用了相同的类名，并在另一个p元素中使用了img。我想在单击基于类名的按钮时删除这些元素。为此，我做了类似的事情

$(`.legends .update_villages_2013`).remove();

这是有效的，但当img被移除时，它会留下一个空的p元素。我也想删除它。所以基本上，如果我运行这个代码

$(`.legends .update_villages_2013`).remove();

这就是div应该如何显示

<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>

我不能只使用parentNode属性，因为如果我这样做，它也会删除主div。

Answer 1

您可以使用:has()来选择具有匹配子体的元素。

$(`.legends *:has(.update_villages_2013)`).remove();
$(`.legends .update_villages_2013`).remove();