Get value of hidden element in table (JS)

Question

I have table in my View

Here is code

  <tbody id="patients" style="overflow-y: scroll;">
                @foreach (var item in Model)
                {
                    <tr>
                        <td class="point">
                            @(rowNo += 1)
                        </td>
                        <td style="display:none"  class="id">
                            @Html.DisplayFor(modelItem => item.Id)
                        </td>
                        <td class="birthday">
                            @Html.DisplayFor(modelItem => item.Date_of_Birthday)
                        </td>
                        <td  class="name">
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td class="title"></td>
                        <td class="title"></td>
                        <td class="lastedit">@Html.DisplayFor(modelItem => item.Last_edit)</td>
                        <td style="text-align: end;">
                            <img style="width:30px;height:30px;" class="delete_pt" src="~/images/icons8-Delete-50.png" />
                            <img style="width:30px;height:30px;" class="masters_data" src="~/images/icons8-Document-30.png" />
                        </td>
                    </tr>
                }
            </tbody>

I need to get <td style="display:none" class="id"> @Html.DisplayFor(modelItem => item.Id) </td>

For it I have function that needs to get value from id class element

Here is code of function

 $(document).on('click', '.delete_pt', function () {
    deleting();
});

function deleting() {
    var title = $(this).parent().find('.id').text();
    alert(title);
    var model = {
    id:pasreInt(id)        };
    $.ajax({
    url: '/PatientDatabase/DeletingPerson',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        type: 'POST',
        dataType: 'json',
        processData: false,
        success: function (data) {
          location.reload();
        }
    });
}

But when I try to get value in alert I get nothing.

Where can be my problem?

Answer 1

This is my sample code:

 $(function() { createRows(); function createRows() { let dummyData = ['Fadhly', 'Aira', 'Haura', 'Al-Khwarizmi']; let tRows = ''; for (let i = 0; i < dummyData.length; i++) { let rowData = { Id: 'id' + i, No: i+1, Name: dummyData[i] }; tRows += '<tr>'; tRows += '<td>' + rowData.No + '</td>'; tRows += '<td style="display: none;">' + rowData.Id + '</td>'; tRows += '<td>' + rowData.Name + '</td>'; tRows += '<td><button class="btn-delete">Delete</button></td>'; tRows += '</tr>'; } $('tbody').html(tRows); } $('button.btn-delete').on('click', function() { let container = $(this).closest('tr'); alert(container.find('td:nth(1)').html()) }); }); 

 table { width: 100%; } table, td { border: 1px solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <thead> <tr> <td>No</td> <td style="display: none;">Id</td> <td>Name</td> <td>Action</td> </tr> </thead> <tbody> </tbody> </table> 

So, for your case, you can get your data by using:

 $('.delete_pt').on('click', function() { let container = $(this).closest('tr'); alert(container.find('.id').html()) });