Olá pessoal!
Estou desde cedo tentando achar uma solução para o meu problema, e tentei de todas as formas e não consigui achar. Segue:
Terminei o curso de de Intro de JS e recostrui todo o website da APARECIDA NUTRIÇÃO. Coloquei como desafio para mim a criação de um ícone, para quando a pessoa quiser deletar, clicar no mesmo e não na linha para excluir o paciente.
A questão que a única forma que encontrei foi de colocar um eventListener na TAG table, porém caso o usuario clique em qualquer outra linha da tabela, aparece a mensagem se deseja excluir.
O que eu desejo fazer? Quero que essa mensagem só apareça quando o usuário clicar no ícone da lixeira e quero que esta função esteja habilitada também na criação de novos pacientes.
Desculpe o incomodo, mas estou desde ás 14 horas tentando e não consigo. Já tentei criar função, alterei o querySelector e etc.
Obrigado pela ajuda! Segue código.
Paulo.
HTML
<body>
<header>
<img src="img/logo-picture.jpg" alt="" class="foto-logo">
<h1>Aparecida Nutricionista</h1>
</header>
<hr>
<section>
<table>
<thead>
<td>Nome</td>
<td>Peso</td>
<td>Altura</td>
<td>Gordura</td>
<td>IMC</td>
<td>Deletar Item</td>
</thead>
<tbody>
<h2 class="subtitulo">Tabela de Pacientes</h2>
<div class="filtrar-paciente">
<label for="filtrar">Filtrar: </label>
<input type="text" name="filtrar">
</div>
<tr class="paciente">
<td class="info-nome">Paul</td>
<td class="info-peso">83</td>
<td class="info-altura">1.81</td>
<td class="info-gordura">20</td>
<td class="info-imc">0</td>
<td class="info-delete"><img src="img/trash.svg" alt="trash picture" class="trash"></td>
</tr>
<tr class="paciente">
<td class="info-nome">Richard</td>
<td class="info-peso">94</td>
<td class="info-altura">1.76</td>
<td class="info-gordura">26</td>
<td class="info-imc">0</td>
<td class="info-delete"><img src="img/trash.svg" alt="trash picture" class="trash"></td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 class="subtitulo">Adicionar Paciente</h2>
<form>
<div class="grupo">
<label for="nome">Nome:</label>
<input type="text" name="nome">
</div>
<div class="grupo">
<label for="nome">Peso:</label>
<input type="text" name="peso">
</div>
<div class="grupo">
<label for="nome">Altura:</label>
<input type="text" name="altura">
</div>
<div class="grupo">
<label for="nome">Gordura:</label>
<input type="text" name="gordura">
</div>
</form>
<div>
<div>
<button class="botao adicionar" id="botao">Adicionar Pacientes</button>
</div>
<div>
<button class="botao importar" id="botao">Importar Pacientes</button>
</div>
</div>
</section>
</body>JS
var tabela = document.querySelector('tbody');
tabela.addEventListener('click', function (event) {
event.preventDefault();
var confirmarExclusao = confirm('Clique em OK para excluir o paciente ou em CANCELAR para não excluir.');
if(confirmarExclusao){
setInterval(function () {
event.target.parentNode.parentNode.remove();
}, 500);
}
})
