如何使用XPath在JavaScript中查找并移除HTML元素

想要移除body标签内的第一个div元素，但不清楚如何通过XPath实现，目前仅掌握通过ID属性移除元素的方法，希望得到相关指导。

目标HTML结构 #

<!DOCTYPE html>
<html>
<body>
  <div>This div needs to hide</div>
</body>
</html>

对应的XPath：/html/body/div[1]

此前使用ID移除元素的示例 #

<!DOCTYPE html>
<html>
<body>
<h1>The Element Object</h1>
<h2>The remove() Method</h2>

<p id="demo">Click "Remove", and this paragraph will be removed from the DOM.</p>
<button onclick="myFunction()">Remove</button>

<script>
function myFunction() {
  const element = document.getElementById("demo");
  element.remove();
}
</script>

</body>
</html>

解决方案 #

场景示例HTML #

<!DOCTYPE html>
<html>
<body>
  <div class="alert alert-warning">Hide me baby!</div>
</body>
</html>

通过XPath查找并操作元素 #

如果需要隐藏元素：

function getElementByXpath(path) {
    return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
  
let targetDiv = getElementByXpath("/html/body/div[1]");
targetDiv.style.display = "none";

如果需要彻底移除元素，将上述最后一行替换为：

targetDiv.remove();

通过类名查找并操作元素 #

注意：getElementsByClassName返回元素集合，需指定索引获取目标元素：
隐藏元素：

document.getElementsByClassName('alert alert-warning')[0].style.display = "none";

彻底移除元素：

document.getElementsByClassName('alert alert-warning')[0].remove();

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