DOM Javascript 删除子节点

Question

I'm learning to code and I need some help.我正在学习编码，我需要一些帮助。 I tried something but is not working.我尝试了一些东西，但没有用。 I have to do a game and at the end I have to do this:我必须做一个游戏，最后我必须这样做：

**This assessment task requires you to make an interactive game. **此评估任务需要您制作一个互动游戏。 When the game starts, five faces are shown on the left and four are shown on the right.游戏开始时，左侧显示五个面孔，右侧显示四个面孔。 The left and right sides are identical, except for one thing: the left side has one extra face.左边和右边是一样的，除了一件事：左边多了一张脸。 The user needs to click on that extra face.用户需要点击那张额外的脸。 If anything except the correct face is clicked, a message is displayed saying that the game is over.如果单击正确的面孔以外的任何内容，则会显示一条消息，表示游戏结束。 If the correct face is clicked, all the currently displayed faces are deleted and a new set of faces is shown at random positions.如果单击正确的人脸，则当前显示的所有人脸都将被删除，并在随机位置显示一组新人脸。 Each time a new set of faces is shown there will be 5 more faces than before, on both the left and the right sides.每次显示一组新面孔时，左侧和右侧都会比以前多 5 个面孔。 There will always be one extra face shown on the left.总是会在左侧显示一张额外的脸。

For example, let's imagine you are playing the game shown in the previous figure.例如，假设您正在玩上图所示的游戏。 After clicking on the extra face (at the top) all the faces disappear and the following new set of faces are shown.**单击额外的人脸（顶部）后，所有人脸都会消失，并显示以下一组新人脸。**

Delete the child nodes删除子节点
Remember that each time the player clicks on the correct face all faces are removed and a new set of faces are generated.请记住，每次玩家点击正确的面孔时，所有面孔都会被移除并生成一组新面孔。 So that means at the appropriate place all children under the leftSide div and rightSide div need to be deleted.所以这意味着在适当的地方需要删除 leftSide div 和 rightSide div 下的所有子级。 You previously learnt how to delete all child nodes on the course using a while loop.您之前学习了如何使用 while 循环删除课程中的所有子节点。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Matching Game</title>
<style>
    img {position: absolute;}
    div {position: absolute; width: 500px; height: 500px;}
    #rightSide {left: 500px; border-left: 1px solid black;}
</style>
<script>
    index = 0;
    var numberOfFaces = 5;
    var theLeftSide = document.getElementById("leftSide");
    var theRightSide = document.getElementById("rightSide");

            function generateFaces() {
                while (index<numberOfFaces) {
                    var images = document.createElement("img");
                    images.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png");
                    images.style.left = Math.floor(Math.random() * 400 ) + "px";
                    images.style.top = Math.floor(Math.random() * 400 ) + "px";
                    document.getElementById("leftSide").appendChild(images);
                    index++;
                }
                leftSideImages = document.getElementById("leftSide").cloneNode(true);
                leftSideImages.removeChild(leftSideImages.lastChild);                   
                document.getElementById("rightSide").appendChild(leftSideImages);    
                var theBody = document.getElementsByTagName("body")[0];
                document.getElementById("leftSide").lastChild.onclick = function nextLevel(event) { 
                    event.stopPropagation();
                    //var delete_nodes = document.getElementById("leftSide");
                    //while (delete_nodes.firstChild)
                    //  delete_nodes.removeChild (delete_nodes.firstChild);
                    numberOfFaces += 5;
                    generateFaces();    
                };
                theBody.onclick = function gameOver() {
                    alert("Game Over!");
                    theBody.onclick = null;
                    theLeftSide.lastChild.onclick = null;
                }; 
            }
</script>
</head>
<body onload="generateFaces()">
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
</html>

Thanks for your time!谢谢你的时间！

Answer 1

This assessment task requires you to make an interactive game.这个评估任务需要你制作一个互动游戏。 When the game starts, five faces are shown on the left and four are shown on the right.游戏开始时，左侧显示五个面孔，右侧显示四个面孔。 The left and right sides are identical, except for one thing: the left side has one extra face.左边和右边是一样的，除了一件事：左边多了一张脸。 The user needs to click on that extra face.用户需要点击那张额外的脸。 If anything except the correct face is clicked, a message is displayed saying that the game is over.如果单击正确的面孔以外的任何内容，则会显示一条消息，表示游戏结束。 If the correct face is clicked, all the currently displayed faces are deleted and a new set of faces is shown at random positions.如果单击正确的人脸，则当前显示的所有人脸都将被删除，并在随机位置显示一组新人脸。 Each time a new set of faces is shown there will be 5 more faces than before, on both the left and the right sides.每次显示一组新面孔时，左侧和右侧都会比以前多 5 个面孔。 There will always be one extra face shown on the left.总是会在左侧显示一张额外的脸。

For example, let's imagine you are playing the game shown in the previous figure.例如，假设您正在玩上图所示的游戏。 After clicking on the extra face (at the top) all the faces disappear and the following new set of faces are shown.单击额外的面（顶部）后，所有面都消失了，并显示了以下新面集。

DOM Javascript 删除子节点

问题描述

1 个解决方案

解决方案1
0 2015-11-11 04:57:23

DOM Javascript 删除子节点

问题描述

1 个解决方案

解决方案1 0 2015-11-11 04:57:23

解决方案1
0 2015-11-11 04:57:23