remove an element from function javascript

Question

I've been programming a game and the part I want to mention here is - there's a form in which the person chooses the size of the board in which they're playing and I've done it successfully and it generates half a pyramid.

My main issue is that, in order to play, I need to pass my mouse over the element, it changes colour and then remove it by clicking on it. Whatever I do I can't seem to be able to do that on the element I choose, I can make it happen to the closest element there but never on the one I click on.

This is what I've got so far,

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

I cannot use jQuery and I have only got a div that defines the board in HTML, not it's components.

`closest` will remove the closest parent, have you tried `this.remove()` — Keith, Oct 27 '17 at 07:46

Nick Cordova · Answer 1 · 2017-10-27T08:38:21.653

This is normally a closure issue when adding listeners in side a for loop. Try:

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

Updated Answer:

The issue is 1) this.closest("div") is not an element and 2) you were adding the listener after appending the node to the 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>

The event handler doesn't touch `i` or `j`. It only cares about `this`. There are no variables being closed over. — Quentin, Oct 27 '17 at 07:54
There needs to be a closure this is a common issue. https://stackoverflow.com/questions/8909652/adding-click-event-listeners-in-loop — Nick Cordova, Oct 27 '17 at 07:58
While the question you link to *Is* a common issue, it is not the issue here (for the reasons described in my previous comment). — Quentin, Oct 27 '17 at 07:59
It hasn't worked though and it has the same problem. it says this.closest is not a function — A. J., Oct 27 '17 at 07:59
I updated my answer with working code. @Quentin was right. You don't need the closure. Sorry on the html. I don't know Portuguese so I had to guess a lot on what you were going for. — Nick Cordova, Oct 27 '17 at 08:41

remove an element from function javascript

1 Answers1