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>
btnDel.addEventListener('click', () => deletePlayer(divPlayer))