Getting element attribute if clicked on element with similar classes

Question

I have this page with following HTML in 'magento' shopping cart page,How can i get the relevant product name (ex.Yamaha PSRE343) on the click event of delete (class=cart_delete_bt),if I have same classes for all products,in javascript in order to be used it in macro of Google Tag Manager.

<tr class="check odd">
   <td class="item-product-img"><a href="http://example.com/irig-keys" title="IK Multimedia iRig Keys " class="cat_prod_img"></a></td>
   <td class="item-product-name">
      <h2 class="cart_prod_name">
         <a class="RemovedProduct_Track" href="http://example.com/irig-keys">IK Multimedia iRig Keys </a>
      </h2>
   </td>
   <td class="item-product-price-price">
      <span class="cart-price">
      <span class="price">$139.00</span>                
      </span>
   </td>
   <td class="a-center item-product-qty" width="75">
      <div class="qty_input"><input name="cart[3038][qty]" id="cart[3038][qty]" value="1" size="4" title="Qty" class="input-text qty" maxlength="12"></div>
   </td>
   <td>
      <span class="cart-price">
      <span class="price">$139.00</span>                            
      </span>
   </td>
   <td class="a-center item-product-edit">
      <!--<a href="http://example.com/checkout/cart/configure/id/3038/" title="Edit item parameters" class="cart_edit_bt"></a>-->
   </td>
   <td class="a-center item-product-delete last">
      <a href="http://example.com/checkout/cart/delete/id/3038/uenc/aHR0cDovL3BhdHNtdXNpYy5leGFuYW5vMS5jb206ODA4MC9jaGVja291dC9jYXJ0Lw,,/" title="delete" class="cart_delete_bt"></a>
   </td>
</tr>
<tr class="check odd">
   <td class="item-product-img"><a href="http://example.com/psre343" title="Yamaha PSRE343" class="cat_prod_img"></a></td>
   <td class="item-product-name">
      <h2 class="cart_prod_name">
         <a class="RemovedProduct_Track" href="http://example.com/psre343">Yamaha PSRE343</a>
      </h2>
   </td>
   <td class="item-product-price-price">
      <span class="cart-price">
      <span class="price">$279.00</span>                
      </span>
   </td>
   <td class="a-center item-product-qty" width="75">
      <div class="qty_input"><input name="cart[3040][qty]" id="cart[3040][qty]" value="1" size="4" title="Qty" class="input-text qty" maxlength="12"></div>
   </td>
   <td>
      <span class="cart-price">
      <span class="price">$279.00</span>                            
      </span>
   </td>
   <td class="a-center item-product-edit">
   </td>
   <td class="a-center item-product-delete last">
      <a href="http://example.com/checkout/cart/delete/id/3040/uenc/aHR0cDovL3BhdHNtdXNpYy5leGFuYW5vMS5jb206ODA4MC9jaGVja291dC9jYXJ0Lw,,/" title="delete" class="cart_delete_bt"></a>
   </td>
</tr>

on click of the delete button i want to get the text highlighted .

enter image description here

I have tried it in jquery as follows

jQuery('.cart_delete_bt').closest('.check').find('.RemovedProduct_Track').html();

also i have tried it using following jquery

jQuery('.cart_delete_bt').first(1).parent().parent().first(1).children().children().attr('title');

but now i have to do it in javascript in order to implement it in GTM. Please Help.

See if this helps: http://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/ Also this, http://stackoverflow.com/questions/18663941/finding-closest-element-without-jquery — TechGirl, Jan 08 '15 at 07:03
_product name (example NP-V80)_....where is it placed in your html? — Jai, Jan 08 '15 at 07:06
please format your html by editing it and post it again. It is very difficult to understand the html and get your problem. — Bhushan Kawadkar, Jan 08 '15 at 07:08
I'v updated the code and i want to get the product name from class "RemovedProduct_Track" on click of delete event having class "cart_delete_bt" — Omkar Somji, Jan 08 '15 at 09:28

Bhushan Kawadkar · Answer 1 · 2015-01-08T10:17:11.663

Try below code to get product name for the click of delete button -

You can get the parent tr using .closest() and then use find find('.item-product-name .cart_prod_name .RemovedProduct_Track') to get the product name anchor. Then use .text() to read product name.

jQuery('.cart_delete_bt').click(function(){
 var productName = $(this).closest('tr').find('.item-product-name .cart_prod_name .RemovedProduct_Track').text();
  alert(productName);
});

JSfiddle DEMO

EDIT -

To achieve the same using javascript you can follow below code

create a javascript function as shown below

function deleteProduct(deleteButton)
{
  var parentNode = deleteButton.parentNode.parentNode;
   var productName = parentNode.getElementsByClassName("RemovedProduct_Track")[0].innerHTML;
   alert(productName);
}

call above function on delete button like below

<a onclick="deleteProduct(this);" href="http://example.com/checkout/cart/delete/id/3038/uenc/aHR0cDovL3BhdHNtdXNpYy5leGFuYW5vMS5jb206ODA4MC9jaGVja291dC9jYXJ0Lw,,/" title="delete" class="cart_delete_bt"></a>

JSFiddle Demo

Thanks for the answer ,now how can i convert this jquery into javascript for the closest element,because i want to make it work in GTM. — Omkar Somji, Jan 08 '15 at 09:52
I don't think you can easily convert this code to javascript as this code need you to travel up to find parent `tr` and then find desired `RemovedProduct_Track`, so lots for element traversal. — Bhushan Kawadkar, Jan 08 '15 at 09:56

Getting element attribute if clicked on element with similar classes

1 Answers1