Retrieve the data attribute value of the parent element containing the child element that was clicked

I need help working with this 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>

Specifically, I am trying to extract the price value data-price= "121.34" and the product description 

Bleed Hydraulic brake system - ABS

I have designated the clicked icon as 

<i class="bi bi-plus-circle"></i>
, but struggling to access the data attribute of its parent element

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

Despite having multiple <li></li> elements, my current method is not yielding the desired information

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

Any suggestions on how to successfully retrieve both the price and product details?

jquerycss

Answer №1

You might want to consider using the data() method in 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to add a class of "trigger" to the loaded URL

Utilizing jQuery for ajax section loading, I aim to create a concise and versatile function that loads the relevant section based on a clicked tab. Here's where it gets tricky... I want to extract the class of the clicked tab and combine it with the ...

jqueryajaxclass

"Unique central logo design that seamlessly overlaps the navigation bar on the

Hello, I am having trouble getting my navbar to have this layout: https://i.sstatic.net/clmZA.png However, I am struggling to place the image on top of the navbar. I am using Bootstrap 5 and have not added any CSS to the navbar yet. Is there a specific pr ...

htmlcssbootstrap-5

Receive notifications count

I have a PHP file with a valid MySQL query that returns the number of rows representing my criteria (number of active notifications). I also have jQuery code to display the notifications counter statically using .text('5'), but I want to dynamica ...

phpjquerymysqlajax

Create data according to jQuery's AJAX data method

When editing in place using jQuery, if the code snippet seems too complicated, please refer to a simpler one. 'column2' => "RAJANgsfdgf" 'column3' => "SRARDHAMgsdfgdf" 'column4' => "40043433" 'column7' =&g ...

javascriptjqueryjquery-plugins

Is the custom cursor feature malfunctioning in IE9?

In my form, I have a web browser control that uses a custom cursor in the CSS code. Everything appears to be working fine in IE8. Css Code cursor: url(AppDirectiry\Classes\QClasses\ClsDesignHtml\Cursors\arrow.ani); However, it s ...

c#csswinformscursorwebbrowser-control

Guide on manipulating the CSS class of an external library component within our custom component in Angular

My component includes an external library component, and I need to toggle one of the classes in the external component based on a condition in my own component. Since I cannot use ngClass for this purpose, I am hesitant to utilize document.querySelector. ...

htmlcssangular

Updating parts of a webpage using JQUERY in MVC 3.0

I am currently working with a JQuery UI Date Picker. When I select a date, the graph data changes accordingly. The problem I am facing is that every time I choose a date from the picker, the entire page refreshes and the data is reloaded. Is there a way ...

jqueryasp.netjquery-ui

Problem with displaying and concealing elements using Jquery. Space-related complications

On my website, I have a feature that showcases multiple items pulled from a MySQL table using PHP. There is also a color filter option where users can select different colors through checkboxes, and the jQuery script will hide/show the items based on the ...

phpjquerymysqlhideshow

Partial View fails to render on the webpage

After submitting information from my first partial view, I attempted to load a second partial view. However, upon submission, the first partial view just refreshes and remains on the same page instead of loading the new view. Despite setting up my controll ...

javascriptc#jqueryajaxasp.net-mvc

What exactly is the purpose of using $({}) in jQuery, and how does the apply method work in jQuery?

I understand that $() is the jQuery function... but what exactly does $({}) refer to or do? I'm analyzing Ben Alman's code on https://gist.github.com/705311 (function(jQuery){ var o = jQuery({}); jQuery.each({ "subscribe" : "bind", ...

jquery

An error occurred while the server was processing the request during an Ajax POST operation

My jQuery Mobile app communicates with a WCF REST service, and most of the calls to the service are GETs. However, one particular function uses a POST request with JSON data. While the POST request works perfectly on our development servers, it fails to w ...

jqueryjsonajaxwcf-rest

Looking for a way to implement a column search filter in JqGrid using server-side code?

I have a JqGrid table where I am passing Json data through my controller. The paging, sorting, and filter/search functionality are all handled by the controller. I specifically want the filter search to be dynamic and not trigger on enter, so searchOnEnter ...

c#jqueryjsonjqgridmvcjqgrid

Why isn't my topmenu positioned correctly on screens of varying widths due to responsive CSS?

Welcome, I am in the process of learning CSS and responsive design. I have an index page that consists of a header, top menu, main text content, and footer. The top menu layout works well up to 300px, but when it goes under 300px, only the additional link ...

htmlcssmedia-querieshtml-listsresponsive

Switch between selecting every group of 3 items and every group of 4 items

Having an array with more than 14 items, I need to group them into 2 different groups in this specific way: The first 3 (#1,2,3) will be in array A, the next 4 (#4,5,6,7) will be in array B, the following 3 (#8,9,10) will be in array A, the subsequent 4 (# ...

phpjavascriptjquerynode.js

Guide on setting the style attribute in HTML within double quotes (as a String)

I have a straightforward question. I am attempting to include a style attribute in an HTML code that is in string format. I am passing the HTML code as a string through a method, and later I need to apply CSS to it based on certain conditions. I attempted ...

htmlcss

Looking for a Selenium script to target the following elements with either CSS or XPath selectors

Here is some HTML code snippet: <div class="top_message_container"> <div style="margin-left: 544.5px; top: -100px;" class="top_msg_div"> point deleted</div> </div> I need assistance in writing Selenium code using Java. This ...

cssxpathselenium-webdriver

Navigating through an array in jquery that has been populated by a php script

I am trying to access an array in jQuery that is returned by a PHP script through an Ajax call This is the Ajax call I am making to get the result from the PHP script: $.ajax({ url: "http://localhost/WCPM/index.php/demand/check_demand_ ...

phpjavascriptjqueryhtmlajax

Using $().html() to add dynamic HTML such as a button with a modal class seems to cause Bootstrap to malfunction

After successfully using datatable to dynamically create a button that displays the associated modal class when clicked, I encountered an issue with Bootstrap not working as expected. I am utilizing the fnRowCallback function of datatables and generating ...

jquerytwitter-bootstrapdatatable

Scrolling up and down within a container of several div elements

Seeking help in creating a scrollable file tree. See the simplified code snippet provided below. https://jsfiddle.net/3kLmchot/1/ An issue arises when attempting to apply overflow-y: scroll; to the filebrowse-outer div, as the initial items become comple ...

htmlcss

Ways to invoke a JavaScript function using a variable

Using a Variable to Call JavaScript or jQuery Function // Declare a variable var functionName = "abc"; // Use the variable as a function call functionName(); // This will call the "abc" function // Define the "abc" function function abc() { // Funct ...

javascriptjquery