Boa tarde, eu tenho um projeto desta forma:
<div data-id="codexample" class="abc">
<div class="container">
<div class="btn">
<p>Teste</p>
</div>
</div>
</div>
Eu queria que a div container fosse clicável e os seus filhos também, mas eu queria também que independentemente de onde tivesse sido clicado eu conseguisse retornar o data-id da div .abc Mas ao usar o chieldNode como a referencia de click muda, eu nem sempre consigo retornar o data-id. Como eu faço para resolver este problema?
Exemplo do código que está realmente no projeto:
const adis = document.getElementsByClassName("adi");
for (var i = 0; i < adis.length; i++) {
adis[i].addEventListener("click", function(target){
var idProduct;
idProduct = target.target.parentNode.getAttribute("data-prodId");
const questdel = confirm('Pretende realmente remover o produto ' + prodName + ' do carrinho?');
if(questdel){
delete cart[idProduct];
localStorage.setItem("cart", JSON.stringify(cart));
}
});
};
Dentro do .adi eu tenho outros sub componentes, mas o .adi é o principal de topo clicavel, e os outros herdam essa propriedade normalmente, mas retorna o .prod-id mal, dependendo do sitio do click.
A pedido dos comentários aqui esta o codigo html (com variáveis JS):
<div class="cartBox">
<table id="cartTable">
<tr>
<td><p>Imagem</p></td>
<td><p>Produto</p></td>
<td><p>Quantidade</p></td>
<td><p>Sub-Preço</p></td>
<td><p>Ação</p></td>
</tr>
<tr data-prodId="' + key + '">
<td><img src="' + data['imagePath'] + '" title="' + data['nome'] + '"></td>
<td><p class="nameProd">' + data['nome'] + '</p></td>
<td><input type="number" min="1" max="15" class="nqtd qtdpc" placeholder="QTD" value="' + cart[key].inCart + '" required autocomplete="off" required autocapitalize="off" /></td>
<td><p>' + subtotal + '€</p></td>
<td><div class="actionDelete adi"><p><i class="fas fa-trash"></i></p></div></td>
</tr>
<tr>
<td class="totalText" colspan="4"><p>Total:</p></td>
<td><p class="totalPc"></p></td>
</tr>
</table>
</div>
.adi
e.prod-id
?parentElement
while (!el.hasAttr("data-prodId")) el = el.parentElement;
. Esse é só um código demonstrativo, não irá funcionar