Question 271455 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to get the row index value after clicking on a delete button?

I have dynamically created rows and would like any row to be deleted accordingly.

var markup = "";
markup += '<tr>';
markup += '<td>' + result.data[0].firstName + result.data[0].lastName + result.data[0].jobTitle+ result.data[0].email + '</td>';
markup += '<td><button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editPersonnelModal" data-id = '+result.data[0].id+'> <i class="fa-solid fa-pencil fa-fw"> </i></button><button type="button" class="btn btn-primary btn-sm deletePersonnelBtn" data-bs-toggle="modal" data-bs-target="#deletePersonnelModal" data-id= '+ result.data[0].id+ '> <i class="fa-solid fa-trash fa-fw"></i> </td>';
markup += '</tr>';
$("table tbody").append(markup);



$('#deleteRow').on("click",function(){
    var index = $('table tr').index();
    alert(index)
});

The index value keeps showing 0 for all the rows and not its corresponding value, any help would be appreciated.

Tags:

3

Answers


  1. 0

    First of all, you can not use the same id value repeatedly in HTML. So use class for this

    Convert id="deleteRow" to class="deleteRow ...<other classes if any>"

    Now Use .closest() to get the index

    $('.deleteRow').on("click",function(){
    var index = $(this).closest('tr').index();
    alert(index);
});

    Note: if you want to remove that particular <tr> from HTML then directly use $(this).closest("tr").remove()

    Working snippet:

    $('.deleteRow').on("click", function() {
  var index = $(this).closest('tr').index();
  console.log(index);
  $(this).closest('tr').remove();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td>Name</td>
      <td>oooo</td>
      <td><button class="deleteRow">Delete</button></td>
    </tr>
    <tr>
      <td>Name</td>
      <td>Alive-to-die</td>
      <td><button class="deleteRow">Delete</button></td>
    </tr>
    <tr>
      <td>Name</td>
      <td>Others</td>
      <td><button class="deleteRow">Delete</button></td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    Use closest and make sure you spell the ID/classNames correctly.

    In this code we do not need the ID to delete

    const result = {
  data: [
    {
      firstName: "John",
      lastName: "Doe",
      jobTitle: "Software Engineer",
      email: "[email protected]",
      id: 1
    },
    {
      firstName: "Jane",
      lastName: "Doe",
      jobTitle: "Software Engineer",
      email: "[email protected]",
      id: 2
    }
  ]
};
var markup = result.data.map(person => `<tr>
  <td>${person.firstName} ${person.lastName}: ${person.email}</td>
  <td>
    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editPersonnelModal" data-id="${ person.id}"><i class="fa-solid fa-pencil fa-fw"></i></button>
    <button type="button" class="btn btn-primary btn-sm deletePersonnelBtn" data-bs-toggle="modal" data-bs-target="#deletePersonnelModal" data-id="${person.id}"><i class="fa-solid fa-trash fa-fw"></i> 
  </td>
</tr>`);
$("table tbody").append(markup);

$('.deletePersonnelBtn').on("click", function() {
  $(this).closest("tr").remove()
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"  />

<table><tbody></tbody></table>
    Login or Signup to reply.
  3. 0

    i don’t find the id ‘deleteRow’ in the code

    for the index() function, please refer to jQuery : https://api.jquery.com/index/

    This example will help you :

    <ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

    If we retrieve one of the three list items (for example, through a DOM function or as the context to an event handler), .index() can search for this list item within the set of matched elements:

    var listItem = document.getElementById( "bar" );
alert( "Index: " + $( "li" ).index( listItem ) );

    Result => Index: 1

    So for your problem i see something like :

    $('#deleteRow').on("click",function(){
    //assuming 'deleteRow' is first child of td
    var trparent = $(this).parent().parent();
    var tableparent = trparent.parent();
    var index = tableparent.index(trparent);
    alert(index);
});

    NB : i prefer debugging with console.log : console.log("index", index);
    NB2 : don’t forget 0 is the value for first index

    Keep me informed if it helped 🙂
    Regards

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search