Question

我正在尝试创建一个包含两个不同方面的页面，为此我设置了两个ID为leftSide和rightSide的不同div。

首先，我将图像节点添加到leftSide五次。

然后，我将leftSide克隆到rightSide div，我想删除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

这是因为rightSide只有一个孩子，它是leftSide的克隆。所以你要删除孩子，但你要做的就是删除孙子。
考虑使用这个：

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

希望工作如果你从谷歌浏览器查看你的html源代码以了解javascript产生的内容也会更好

Answer 2

您将#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 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>

注意leftSide div也被复制了？这不仅是因为你现在有两个具有相同ID的元素，而且现在只有一个子节点，即div，它包含所有图像。

我们能做些什么呢？

基本上你想要的只是复制leftSide的子节点。有很多方法可以做到这一点：

如果您使用的是jQuery等内容，则可以使用$("#leftSide").children().clone()克隆所有子元素;
您可以获取子节点数组（document.getElementById("leftSide").childNodes），循环遍历它，并克隆每个节点;
您可以简单地将图像节点添加到初始循环中的两个div中;
您还可以复制原始内部HTML：document.getElementById("rightSide").innerHTML = document.getElementById("leftSide").innerHTML

这些只是你解决这个问题的一些方法。 Google上还有更多内容。

删除最后一个子节点DOM

3 个答案:

问题

我们能做些什么呢？