関数javascriptから要素を削除する

Question

私はゲームをプログラミングしていました。ここで言及したい部分は、人が遊んでいるボードのサイズを選んだことですそれは成功し、半分のピラミッドを生成します。

私の主な問題は、再生するためには、要素上にマウスを置く必要があります。色を変えてクリックして削除します。私が何をするにしても、私が選んだ要素でそれを行うことができないように見えますが、私はそれを最も近い要素に起こすことができますが、私がクリックした要素には起こらせません。

これは私がjQueryのを使用することはできませんし、私はそれはコンポーネントですが、HTMLにボードを定義するのdivだけでなく、持っている、私がこれまで持っているもの

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

です。

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>