删除最后一个子节点 DOM

Question

我正在尝试创建一个具有两个不同侧面的页面，为此，我在两个不同的div中设置了ID为leftSide和rightSide。

首先，我添加一个图像节点来leftSide五次。

然后，我克隆leftSide到rightSidediv，我想从rightSide中删除最后一个图像，这样，我总共有五个图像在左边，四个图像在右边。

但是，我的代码只是删除左侧的所有五个图像，而不仅仅是最后一个：

function createSmile() {
for (var i = 0; i < 5; i++) {
var newImg = document.createElement("img");
newImg.src = "smile.png";
var imgPart = document.getElementById("leftSide");
imgPart.appendChild(newImg);
}
document.getElementById("rightSide").appendChild(document.getElementById("leftSide").cloneNode(true));
document.getElementById("rightSide").removeChild(document.getElementById("rightSide").lastChild);
}

Answer 1

您将#leftSide克隆到#rightSide中，因此#rightSide只有一个子项。 然后您只删除一个孩子。

解决方案就在这里

function createSmile() {
for (var i = 0; i < 5; i++) {
var newImg = document.createElement("img");
newImg.src = "smile.png";
leftSide.appendChild(newImg);
rightSide.appendChild(newImg.cloneNode(true));
}
//Here you clone WHOLE <div id="leftSide"></div> into <div id="rightSide"></div>
//document.getElementById("rightSide").appendChild(document.getElementById("leftSide").cloneNode(true));
rightSide.removeChild(rightSide.lastChild);
}

Answer 2

发生这种情况是因为右侧只有一个孩子，它是左侧的克隆。所以你正在移除孩子，但你要做的是移除孙子。
考虑使用这个：

document.getElementById("rightSide").removeChild(document.getElementById("rightSide").children[0].lastChild);

希望有效
如果您从谷歌浏览器查看 html 的源代码以了解 JavaScript 产生的内容，那也会更好

Answer 3

问题

克隆节点时，克隆的是整个 HTML 块。例如，当您克隆leftSide并将其附加到rightSide中时，您真正附加的是这样的：

<div id="leftSide">
<img src="smile.png">
<img src="smile.png">
<img src="smile.png">
<img src="smile.png">
<img src="smile.png">
</div>

请注意，leftSidediv 也被复制到那里了吗？这不仅很糟糕，因为您现在有两个具有相同 ID 的元素，而且现在只有一个子节点，即div，然后包含所有图像。

我们能做些什么呢？

本质上，您想要的是仅复制leftSide的子节点。有许多方法可以做到这一点：

• 如果你正在使用诸如jQuery之类的东西，则可以使用$("#leftSide").children().clone()来克隆所有子元素;

• 您可以获取子节点数组(document.getElementById("leftSide").childNodes(，遍历它，并克隆每个子节点;

• 您可以简单地将图像节点添加到初始循环中的两个div 中;

• 您还可以将原始内部 HTML 复制到：document.getElementById("rightSide").innerHTML = document.getElementById("leftSide").innerHTML

这些只是您可以解决此问题的一些方法。谷歌上还有更多。