從函數javascript中刪除元素

Question

我一直在編寫游戲，而我想在這里提及的部分是-有一種形式，人們可以選擇自己正在玩的棋盤的大小，而我已經成功地做到了，它會產生一半的金字塔。

我的主要問題是，要播放，我需要將鼠標移到該元素上，它會更改顏色，然后通過單擊將其刪除。 無論我做什么，似乎都無法對所選元素執行此操作，但我可以使它發生在最接近的元素上，但永遠不會在我單擊的那個元素上發生。

這就是我到目前為止

function selectTab() { 
    document.getElementById("tabuleiro").innerHTML = "";
    var tamanho = document.getElementById("valorint").value;
    if(tamanho<=10) {
        console.log(tamanho);
        var tab = document.getElementById("tabuleiro");
        for(var i = 0; i<tamanho; i++) {
            var linha = document.createElement('div');
            for(var j = 0; j<i+1; j++) {
                var coluna = document.createElement('div');
                coluna.setAttribute("id", "coluna");
                linha.appendChild(coluna);
                coluna.addEventListener("click", function() {
                    playMove(this.id) }, false);
            }
            tab.appendChild(linha);
        }
    }
    else {
        console.log(tamanho);
        alert("Isso é demasiado!");
    }
}

function playMove(id) {
    this.closest("div").remove();
}

我不能使用jQuery，而只有一個div定義了HTML面板，而不是它的組件。

Answer 1

在for循環中添加偵聽器時，這通常是關閉問題。 嘗試：

function selectTab() { 
    document.getElementById("tabuleiro").innerHTML = "";
    var tamanho = document.getElementById("valorint").value;
    if(tamanho<=10) {
        console.log(tamanho);
        var tab = document.getElementById("tabuleiro");
        for(var i = 0; i<tamanho; i++) {
            var linha = document.createElement('div');
            for(var j = 0; j<i+1; j++) {
                var coluna = document.createElement('div');
                coluna.setAttribute("id", "coluna");

                (function(element){
                    element.addEventListener("click", function() {
                    playMove(this.id) }, false);
                )}(coluna);

                coluna.appendChild(coluna);
            }
            tab.appendChild(linha);
        }
    }
    else {
        console.log(tamanho);
        alert("Isso é demasiado!");
    }
}

function playMove(id) {
    this.closest("div").remove();
}

更新的答案：

問題是1）this.closest（“ div”）不是元素，以及2）您在將節點附加到dom之后添加了偵聽器。

 function selectTab() { document.getElementById("tabuleiro").innerHTML = ""; var tamanho = document.getElementById("valorint").value; if(tamanho<=10) { console.log(tamanho); var tab = document.getElementById("tabuleiro"); for(var i = 0; i<tamanho; i++) { var linha = document.createElement('div'); linha.setAttribute("class", "linha"); for(var j = 0; j<i+1; j++) { var coluna = document.createElement('div'); coluna.setAttribute("class", "coluna"); coluna.addEventListener("click", function() { this.remove() }, false); linha.appendChild(coluna); } tab.appendChild(linha); } } else { console.log(tamanho); alert("Isso é demasiado!"); } } 

 #tabuleiro { border: 1px red solid; } .coluna { height: 25px; width: 25px; border: 1px blue solid; } .linha { display: inline-block; } 

 <div id="tabuleiro"> </div> <input id="valorint" type="text" value="3"> <button type="button" onclick="selectTab()">Click Me!</button>