高效移除body元素下的最后一个div元素
JavaScript DOM操作中，精准移除特定元素是常见需求。本文讲解如何从元素下选择并移除最后一个<div>元素。 假设HTML结构包含多个嵌套<code><div>，我们需要精确定位并删除目标<code><div>，避免误删其他元素。 直接使用<code>document.getElementsByTagName('div')再取最后一个元素的方法容易出错，因为它会获取页面所有<div>，而非仅<code>下的。
高效准确的解决方案是使用document.querySelector()方法结合CSS选择器。document.querySelector()接受CSS选择器，返回匹配到的第一个元素。 要选择下的最后一个<div>，可以使用选择器<code>"body > div:last-of-type"。 >表示直接子元素，:last-of-type选择指定类型的最后一个元素。 获取到目标元素后，使用parentNode.removeChild()方法移除。parentNode属性返回元素的父节点，removeChild()移除指定子节点。
完整代码如下：
const div = document.querySelector("body > div:last-of-type");
if (div) {
div.parentNode.removeChild(div);
} else {
console.log("没有找到body下的最后一个div元素");
}
这段代码首先使用querySelector获取下最后一个<div>，并赋值给变量<code>div。 然后，判断div是否为null，避免removeChild()方法报错。 如果找到元素，则将其移除；否则，输出提示信息。 这确保只删除下的最后一个<div>。</div>
