Get data-* value of parent of clicked child

April 7, 2022

I have the following list element

<li class="list-group-item d-flex justify-content-between align-items-center"><span class="product_name" style="font-size:24px; color:#870FD1" data-price= "121.34"><i class="bi bi-plus-circle"></i></span> Bleed Hydraulic brake system - ABS <span class="product_name"><u>More info</u></span></li>

and i want to read data-price= "121.34" and this text Bleed Hydraulic brake system - ABS

I have set the clicked element as <i class="bi bi-plus-circle"></i> and so far i cant read the data attribute value of the parent

$(".bi-plus-circle").click(function(){
     alert($('.bi-plus-circle').parent().attr('price'));
      });

I have several <li></li> elements and this too doesn’t get me the data i want

$(".bi-plus-circle").click(function(){
     alert($(this).parent().attr('price'));
});

How can read the price and the product text?

>Solution :

You should use data() method from jquery instead of attr()

$(".bi-plus-circle").click(function(){
     console.log($('.bi-plus-circle').parent().data("price"));
});

<li class="list-group-item d-flex justify-content-between align-items-center">
  <span class="product_name" style="font-size:24px; color:#870FD1" data-price= "121.34">
    <i class="bi bi-plus-circle">(+)</i>
  </span>
  Bleed Hydraulic brake system - ABS
  <span class="product_name"><u>More info</u></span>
</li>