Javascript 正在尝试删除子元素的最后一个子元素_Javascript

Javascript 正在尝试删除子元素的最后一个子元素

javascript

Javascript 正在尝试删除子元素的最后一个子元素,javascript,Javascript,尝试删除“leftSideImages”的最后一个子项，以便右侧的图像比左侧的图像少一个子项。下面是我的代码。目标是将左边的图像克隆到右边的负一上。谢谢大家! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Matching Game</title> <style> div {

尝试删除“leftSideImages”的最后一个子项，以便右侧的图像比左侧的图像少一个子项。下面是我的代码。目标是将左边的图像克隆到右边的负一上。谢谢大家!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Matching Game</title>
    <style>
        div {
            position: absolute;
            width: 500px;
            height: 500px
        }
        img { 
            position: absolute
        }
        #rightSide { 
            left: 500px; 
            border-left: 1px solid black 
        }
    </style>
    <script>
        function generateFaces(){

            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");
            var theRightSide = document.getElementById("rightSide");

            for ( var i = 0; i< numberOfFaces; i++){
                var random_top = Math.floor(Math.random() * 400);
                var random_left = Math.floor(Math.random() * 400);

                var img = document.createElement("img");
                img.src="smile.png";
                img.style.top = random_top + "px";
                img.style.left = random_left + "px";


                theLeftSide.appendChild(img);

            }
            var leftSideImages = theLeftSide.cloneNode(true);
            //this doesn't work         leftSideImages.removeChild(theLeftSide.lastChild);
            // it gets rid of everything.
            // I'm trying to clone the left side onto the right with one less image
            theRightSide.appendChild(leftSideImages);
        }
    </script>
  </head>
  <body>
      <h3>Matching Game</h3>
      <p>Click on the extra smiling face on the left.</p>
      <div id="leftSide"></div>
      <div id="rightSide"></div>
      <script>generateFaces()</script>
  </body>
</html>


配对游戏
div{
位置：绝对位置；
宽度：500px；
高度：500px
}
img{
位置：绝对位置
}
#右侧{
左：500px；
左边框：1px纯黑
}
函数生成器（）{
var numberOfFaces=5；
var theLeftSide=document.getElementById（“leftSide”）；
var theRightSide=document.getElementById（“右侧”）；
对于（变量i=0；i
生成（）

您需要使用removeChild和lastElementChild，如下所示：

var parent=document.getElementById（“leftSide”）；
parent.removeChild（parent.lastElementChild）

1.
2.
3.
您试图删除的子元素与您在上调用的removeChild
的子元素不同。应该是：
leftSideImages.removeChild(leftSideImages.lastChild);

我不知道为什么你的代码删除了所有内容。根据文档，如果参数不是给定父级的子级，它应该抛出异常。
原因是您要克隆整个左侧，然后删除最后一个子级，即整个左侧
  var leftSideImages = theLeftSide.cloneNode(true);
  //leftSideImages now has whole theLeftSide - the div not its content.

  var i,l, children;
  children = theLeftSide.childNodes;
  i=0;
  l = children.length;

  for( i; i< l ; i++){
    theRightSide.appendChild(children[i].cloneNode(true));
  }

  theRightSide.removeChild(theRightSide.lastChild);

var leftSideImages=theLeftSide.cloneNode（true）；
//leftSideImages现在拥有整个左侧-div，而不是其内容。
变量i，l，儿童；
children=theLeftSide.childNodes；
i=0；
l=儿童。长度；
对于（i；i

请记住，可能有更好的解决方案
这里是小提琴，向你展示它的工作原理
使用leftSideImages.removeChild（leftSideImages.lastChild）；
而不是leftSideImages.removeChild（theLeftSide.lastChild）
这是正确的，已经给了一个朋友。：-）
我也在我的机器上运行了同样的东西。
左侧。lastChild
不是左侧图像的子对象，它是左侧图像的子对象。当你克隆左侧图像时，你也克隆了它的所有子对象，因为你说deep=true
。只是为了澄清一下。我想保持左侧完整。我只想删除右侧的一个图像。最后一个。谢谢。这在问题中非常清楚。在左侧，图像是leftSide
DIV的子对象。但是在右侧，您正在克隆leftSide
DIV，从中删除最后一个子对象，然后将整个DIV作为right side
的子对象追加。因此，这些图像将是右侧的孙子。这就是你真正想要的吗？把答案放在答案里，而不仅仅是放在小提琴上。当然。完成-小提琴只是展示了更好的一切。谢谢霍斯的帮助。