Get td value on clicking button of same row using jquery

Question

There will be lot of rows in the table and delete buttons for each row.. while clicking delete button, I'm trying to fetch two td values.. and it's returning null

Html is

<tr>
   <td> abc</td>
     <td> def</td>
       <td> <input type="button" class=" delete"  value=" delete"></td>

Jquery code on clicking button

  jQuery(this).find("tr td:eq(1)").text();

Is there anything wrong? It should get the second td value of which ever row when we click delete button

Answer 1

You need to go back to the parent first, then find the child.

$('.delete').on('click', function(){
  txt = $(this).parents('tr').find("td:eq(1)").text();
  console.log(txt);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>abc</td>
    <td>def</td>
    <td>
      <input type="button" class="delete" value="delete">
    </td>
    <tr>
</table>

Answer 2

Try this.

jQuery(this).closest('tr').find('td:eq(1)').text();

Answer 3

First you have to get the parent.

jQuery(this).parents('tr').find("td:eq(1)").text();

Answer 4

use closest() function and get its parent tr and find "td:eq(1)"

jQuery(this).closest('tr').find('td:eq(1)').text();