Question

尝试删除＆＃34; leftSideImages＆＃34;的最后一个孩子。这样右侧的图像就会减少左侧的图像。以下是我的代码。目标是将左侧的图像克隆到右侧减去一个。谢谢！

<!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>

Answer 1

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

<div id="leftSide">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

network monitor

Answer 2

您正在尝试删除与您正在调用removeChild的元素不同的元素的子元素。它应该是：

leftSideImages.removeChild(leftSideImages.lastChild);

我不确定为什么你的代码删除了所有内容。根据文档，如果参数不是给定父级的子级，它应该抛出异常。

Answer 3

原因是你正在克隆整个左侧，然后移除最后一个孩子，这是整个左侧，

  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);

请记住，可能有更好的解决方案。

这里有一个小提示，告诉你它有效。

https://jsfiddle.net/f0hrre90/

Answer 4

使用leftSideImages.removeChild（leftSideImages.lastChild）; 而不是leftSideImages.removeChild（theLeftSide.lastChild）;

这是正确的，已经给了一个朋友。 :-) 我也在机器上运行同样的东西。

试图删除子元素的最后一个子元素

4 个答案: