JavaScript 删除最后一个子元素 - JavaScript

在 JavaScript 中，我们可以使用几种方式来删除一个元素的最后一个子元素。下面将会介绍三种方法。

方法一：使用 lastChild 属性

可以使用 lastChild 属性来访问一个元素的最后一个子元素。例如：

const parent = document.getElementById("parent");
parent.removeChild(parent.lastChild);

上面的代码中，我们首先使用 getElementById 方法获取了一个父元素节点，然后使用 removeChild 方法从父节点中删除了最后一个子节点。

这个方法有一个问题，如果父元素内只有一个空格节点，则会被当作 lastChild，使用此方法会删掉空格节点，而不是最后一个子元素。

方法二：使用 querySelector 和 last-child 伪类

querySeletor 选择器能够选取符合条件的第一个元素，这种选择器可以与CSS一样使用选择器伪类进行在选择上的精准定位。

const lastChild = document.querySelector("#parent:last-child");

if (lastChild) {
  lastChild.parentNode.removeChild(lastChild);
}

上面的代码我们首先使用 querySelector 方法获取了一个特定父元素下的最后一个子元素节点，然后使用 removeChild 方法从父节点中删除了最后一个子节点。

需要注意的是，如果该节点不是指定选择器的最后一个节点，则查找不到该元素。

方法三：使用数组操作

也可以使用数组操作来完成对最后一个子元素的删除操作。

const children = parent.children;
const lastChild = children[children.length - 1];

parent.removeChild(lastChild);

上面代码中我们将元素的所有子元素保存到一个数组中，再根据数组长度来获取最后一个子元素，最后使用 removeChild 方法从父节点中删除了最后一个子节点。

需要注意的是，如果该元素没有任何子元素，则会出现错误。

以上是 JavaScript 删除最后一个子元素的三种方法，我们可以在不同的场景中使用不同的方法。