Question

我正在为学校做刮刮卡游戏。它必须在Javascript中完全编码。问题是，我无法正确删除div。

<!DOCTYPE HTML>
<html>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/skeleton.js"></script>
<body>
<h1 align="center">Scratch Cards - Match three the same</h1>
   <div id="kraslot">
     <img src=""  class="kraslotimage1" id="kraslotimage1">
     <img src=""  class="kraslotimage2">
     <img src=""  class="kraslotimage3">
     <button id="button">Again</button>
   </div>
</body>
</html>

这是我的JavaScript：

/* Copyleft 2013, all wrongs reversed */
/*jslint browser: true*/
/*globals console*/

(function () {
'use strict';


// Hier onder jouw code
// ------------------------------
// This script must be within the relatively positioned DIV.


    var kraslot=new Array('image/peer.jpg','image/kiwi.jpg','image/banaan.jpg');

    var zetBlokjesNeer = function () {

        var idn = 1;
        var blokje,p,j,k;


        // voor elke afbeelding teller p
        for (p=0;p<1;p++)
        // voor elke rij, teller j
        for (j=0;j<4;j++)
        // voor elke kolom, teller k
        for (k=0;k<4;k++) {
            console.log(idn);
            blokje = document.createElement("div");
            blokje.id = "M"+idn;
            blokje.classList.add("blokje");
            // HIER GAAT NOG IETS MIS
            blokje.style.top = eval(0+j*25) + 'px';
            blokje.style.left = eval(130+k*25) + 'px';
            document.getElementById("kraslot").appendChild(blokje);
            blokje.addEventListener("click", krassen)
            // hier nog een blokje.addEventListener toevoegen die luistert naar click en de functie krassen aanroept

            var krassen = function(){
            document.getElementById(blokje);
            blokje.remove();
            }
            idn++;
        }


        // document.write('<DIV ID="M'+idn+'" 
        // onmouseover="style.display=\'none\'" 
        // CLASS="general'+i+'" 
        // STYLE="position:absolute;width:25;height:25;top:'+eval(0+j*25)+';left:'+eval(125+p*125+k*25)+'"
        // ></DIV>');
        // }
    }



    var rnd = function () {
        return Math.floor(Math.random()*kraslot.length);
    }

    function scimgload() {
        document.images[0].src=kraslot[rnd()];
        document.images[1].src=kraslot[rnd()];
        document.images[2].src=kraslot[rnd()];
    }

    var refresh = function(){
        refresh = document.createElement ("div");
        refresh.id = refresh;
        refresh.addEventListener("click", reload)
    }

    var reload = function(){
        location.reload(true);
    }

    window.onload = function () {
        scimgload();
        zetBlokjesNeer();

    }    


    // function scmetal() {
    // for (i=0;i<192;i++)
    // document.all['M'+i].style.display="";
    // }
// ------------------------------

// Sluiten van de scope functie
}());
       // TODO bedenk hoe je de transparantie van event.target kan verranderen
        // gebruik bijvoorbeeld classList

如您所见，名为“blokjes”的块由for循环创建。

功能“krassen”应该能够在点击时删除每个“blokje”。出于某种原因，它现在只删除了最后一个“blokje”。

任何人都可以帮我吗？

Answer 1

document.getElementById(blokje);

不是正确的ID ..

也许试试：

 document.getElementById(blokje.id);

Answer 2

试试这个：

blokje.addEventListener("click", function(e){
    var target = e.target;
    if (target.parentElement) {
         target.parentElement.removeChild(target);
    }
});

这是一个工作小提琴：

http://jsfiddle.net/qbv6C/

编辑：

在某处添加此函数定义：

var clickHandler = function(e){
        var target = e.target;
        if (target.parentElement) {
             target.parentElement.removeChild(target);
        }
}

删除：

blokje.addEventListener("click", krassen)
            // hier nog een blokje.addEventListener toevoegen die luistert naar click en de functie krassen aanroept

            var krassen = function(){
            document.getElementById(blokje);
            blokje.remove();
            }

添加：

blokje.addEventListener("click", clickHandler);

删除动态创建的div

2 个答案: