JQuery table select nearest empty

Question

I am trying to select a class from the same table (and row).
If the user clicks "Delete", I need to take the text from "form_delete_id".
Sorry, I am returning an empty string. I tried "closest ()" and "parent ()" with no luck.
This is my code:

<table class="responsive-table bordered striped">
  <thead>
    <tr>
      <th>id</th>
      <th>page</th>
      <th>parameter</th>
      <th>method</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="form_delete_id">2</td>
      <td class="form_delete_page">dqfsq</td>
      <td class="form_delete_parameter">qsdfqs</td>
      <td class="form_delete_method">post</td>
      <td class="form_delete_trigger"><a class="waves-effect waves-light btn red"><i class="material-icons left">delete</i>Remove</a></td>
    </tr>
  </tbody>
</table>

And below Javascript:

<script>
$(".form_delete_trigger").click(function() {
  alert($(this).closest(".form_delete_id").text());
});
</script>

My code can also be found on JSFIDDLE

Answer 1

.form_delete_idis an element of sibling click .form_delete_id. You need to use .siblings()instead .closest():

$(function(){
 $(".form_delete_trigger").click(function() {
  alert($(this).siblings(".form_delete_id").text());
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="responsive-table bordered striped">
  <thead>
    <tr>
      <th>id</th>
      <th>page</th>
      <th>parameter</th>
      <th>method</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="form_delete_id">2</td>
      <td class="form_delete_page">dqfsq</td>
      <td class="form_delete_parameter">qsdfqs</td>
      <td class="form_delete_method">post</td>
      <td class="form_delete_trigger"><a class="waves-effect waves-light btn red"><i class="material-icons left">delete</i>Remove</a></td>
    </tr>
  </tbody>
</table>

Run codeHide result

Answer 2

:

<script>
$(".form_delete_trigger").click(function() {
  alert($(this).parent().find(".form_delete_id").text());
});
</script>

sibiling

<script>
$(".form_delete_trigger").click(function() {
  alert($(this).siblings(".form_delete_id").text());
});
</script>

https://jsfiddle.net/t8okf8kc/