Get data-* value of parent of clicked child-CodePudding

I have the following list element

<li ><span  style="font-size:24px; color:#870FD1" data-price= "121.34"><i ></i></span> Bleed Hydraulic brake system - ABS <span ><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 ></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?

CodePudding user response：

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

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

<li >
  <span  style="font-size:24px; color:#870FD1" data-price= "121.34">
    <i >( )</i>
  </span>
  Bleed Hydraulic brake system - ABS
  <span ><u>More info</u></span>
</li>