-2

Estou criando um contador de pontos para um jogo que minha família joga, estou com dificuldade de excluir o elemento divPlayer (o jogador), já tentei de várias formas mas não consegui espero que vocês possam me dar uma dica, desde já agradeço.

Contador Pontinho
<header class="main_header">Contador Pontinho</header>

<main>  
    <section class="principal">          
        <section class="player_register">
            <input type="text" name="player_name" class="player_name" placeholder="Nome do Jogador">
            <input type="button" value="Novo" class="add_new_player" onclick="newPlayer()">
        </section>

        <section class="game_area">
            <!--Were the game will take place-->
        </section>
    </section>
</main>
<script>


    var player =  {}
        var gameArea = document.querySelector(".game_area")


        function newPlayer() {

           player.name = document.querySelector(".player_name").value

           if(player.name.length == 0 || player.name.length > 12) {

               alert("[ERRO]. Nome grande demais ou inválido!")

          } else {

              player.points = 0

              let divPlayer = document.createElement("div")

              divPlayer.innerHTML = `
                  <div class="player">                 
                        <img src="images.jfif" alt="" class="player_img">
                        <text class="name">${player.name}</text>
                        <input type="button" value="${player.points}" class="add_points">
                        <input type="button" value="❌" class="delete_player">                
                 </div> `
        
             gameArea.style.padding = "1px 10px 1px 10px"

             gameArea.appendChild(divPlayer)

             let buttonDelete = document.querySelector(".delete_player")
             buttonDelete.addEventListener("click",deletePlayer(divPlayer),false)
        
    }
}

         function deletePlayer(element){
              console.log("deletou",element)
              gameArea.style.padding = "0px 10px 0px 10px"
              element.parentNode.removeChild(element)
   }
</script>
1
  • Você deve usar uma função anônima ou arrow function ao definir o evento clique do botão de deletar: btnDel.addEventListener('click', () => deletePlayer(divPlayer)) 28/07/2022 às 13:45

1 Resposta 1

-2

Primeira coisa a se fazer é remover esse trecho do código

let buttonDelete = document.querySelector(".delete_player")
buttonDelete.addEventListener("click",deletePlayer(divPlayer),false)

de dentro da sua função de que adiciona um novo jogador newPlayer()

Depois dentro da divPlayer onde você define os seus elementos html, coloque a função deletePlayer(this) no evento onclick passando o this como parâmetro.

divPlayer.innerHTML = `
                  <div class="player">                 
                        <img src="images.jfif" alt="" class="player_img">
                        <text class="name">${player.name}</text>
                        <input type="button" value="${player.points}" class="add_points">
                        <input type="button" value="❌" class="delete_player" onclick="deletePlayer(this)">                
                 </div> `

Agora dentro da sua função deletePlayer(element) substitua essa linha element.parentNode.removeChild(element); por element.parentNode.remove();. Devendo ficar assim:

function deletePlayer(element) {
  gameArea.style.padding = "0px 10px 0px 10px"
  element.parentNode.remove();
}

link com as alterações feitas

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .