Jquery - get element closest to clicked button in container

Question

I use php to fetch data from a mongodb database and display it as html elements. With jquery I want to click on a button on each item I have and get the element title of the clicked item and console.log it.

This is my product container with the created elements.

<div class="category__container">
          <div class="category__center">
            <?php 
                //get products and display them as html 
                $cursor = $collection->find();
              foreach ($cursor as $doc){
                echo 
                  " <div class= 'product category__products'>
                        <div class='product__header'>
                          <img src = ".$doc["image"]." />
                        </div>  
                        <div class= 'product__footer'>
                          <h2> ".$doc["title"]." </h2>                              
                          <div class= 'product__price'>
                              <h4> $".$doc["price"]." </h4>
                          </div>
                          <button type='button' class='product__btn'>Add To Cart</button>
                        </div>
                    </div>
                  ";

              }  

            ?>
          </div>
        </div>

My jquery event on document ready:

$('.category__center').on('click' , '.product__btn' ,(e)=>{
  //this is where I want to get the <h2> title from '.product__footer'
  

})

I would appreciate your help.

Answer 1

You can use closest(".product__footer").find("h2") to get h2 tag value.

Demo Code :

 $('.category__center').on('click', '.product__btn', (e) => { //get closest product footer then h2 text console.log($(e.target).closest(".product__footer").find("h2").text()) console.log($(e.target).closest(".product").find('img').attr('src')) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="category__container"> <div class="category__center"> <div class='product category__products'> <div class='product__header'> <img src="abc.png" /> </div> <div class='product__footer'> <h2> Abs12</h2> <div class='product__price'> <h4>123 </h4> </div> <button type='button' class='product__btn'>Add To Cart</button> </div> </div> <div class='product category__products'> <div class='product__header'> <img src="deded.png" /> </div> <div class='product__footer'> <h2> Abcd </h2> <div class='product__price'> <h4>12 </h4> </div> <button type='button' class='product__btn'>Add To Cart</button> </div> </div> </div> </div>

Answer 2

Use a custom attribute with each product__btn like -

 <button type='button' class='product__btn' data-product='".$doc["title"]."'>Add To Cart</button>

Now in the click event in jQuery, use -

 $('.category__center').on('click', '.product__btn',(e)=>{ var productName = $(this).attr('data-product'); })

Answer 3

$(document).on("click",".product__btn", function(){
   let title = $(this).closest(".product__footer").find("> h2").text().trim();
   console.log(title);
});