En el HTML he armado una estructura de una tarjeta:
<div class="item">
<img class="trj_img_cls" src="<?php echo $cpui['path_foto'] ?>" alt="<?php echo $cpui['descripcion_producto'] ?>" id="<?php echo $cpui['descripcion_categoria'].','.$cpui['descripcion_subcategoria'].','.$cpui['descripcion_producto'].','.$cpui['precio'] ?>" onclick="javascript: clave()">
<div class="nombre_producto">
<h2 id="<?php echo $cpui['descripcion_categoria'].','.$cpui['descripcion_subcategoria'].','.$cpui['descripcion_producto'].','.$cpui['precio'] ?>" onclick="javascript: clave()"><?php echo $cpui['descripcion_producto'] ?></h2>
</div>
<div class="info-trj">
<div class="precio-trj">
<i class="icon-dollar"></i>
<label><?php echo $cpui['precio'] ?></label>
</div>
<i class="agrega-carro icon-cart-plus"></i>
</div>
<div class="caracteristicas">
<ul id="<?php echo $cpui['descripcion_producto'] ?>"></ul>
</div>
</div>
</div>
En la actualidad estoy consultando para poder elaborar una función en javascript que mediante el pseudo botón que es el <i>
obtenga algunos valores (nombre, el src de la imagen y el precio) sin tener que agregar nuevamente un atributo id en la respectiva etiqueta:
let allContainerCart = document.querySelector('.caja_contenido');
loadEventListeners();
function loadEventListeners() {
allContainerCart.addEventListener('click',addProduct);
}
function addProduct(e) {}
; en la función addProduct
quiero crear una variable que va a ser igual al div con clase="item", y de lo que he visto hasta el momento puedo acceder al padre del elemento mediante e.target.parentElement
pero ¿Quisiera saber cómo puedo llegar hasta el div con
la clase item? porque estoy utilizando e.target.parentNode
y en consola obtengo object HTMLDivElement pero no se si es la correcta.