How to get value of a tag inside modal popup

Question

I have the following code and i want the value from a tag.

  <div class="modal fade show" id="myModal" tabindex="-1" role="dialog" aria- 
    labelledby="myModalLabel" style="display: block;">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
   <span aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="myModalLabel">Ingridiants  Detail</h4>
                    </div>
                    <div class="modal-body">
                        <div id="dvDetail">&nbsp;&nbsp;<table><tbody><tr><td>Name</td>
  <td>quantity</td></tr><tr><td>Chicken&nbsp;&nbsp;</td><td>1&nbsp;&nbsp;</td><td><a class="fa fa- 
  times" id="btnRemove" title="Delete" value="Chicken"></a>&nbsp;&nbsp;</td></tr></tbody></table> 
  </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data- 
   dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

I have used following code to get value but value is undefined.

    $('body #dvDetail').on('click', function () {
        if (confirm("Are you sure to delete this ingridients")) {
            var tr = $(this).closest('tr');
            var CartId = $(this).closest('tr').find("btnRemove").val();
            alert(CartId);
            //Deletes the record with ID sent below
            $.post(
                '/RegisterFoods/DeleteIng/',
                { FoodName: CartId },
                function (item) {
                    tr.remove();
                }, "json");

            location.reload();

        }
    });

The alert is undefined. but all other code is working.

Answer 1

There are some mistakes.

1. Anchor <a> does not have value attribute, so you can use data attr as below
2. you have mistakes to find that it

 $('body #dvDetail').on('click', function () { var _t = $(this); if (confirm("Are you sure to delete this ingridients")) { var tr = $(this).closest('tr'); var CartId = _t.find("#btnRemove").data('value'); alert(CartId); //Deletes the record with ID sent below $.post( '/RegisterFoods/DeleteIng/', { FoodName: CartId }, function (item) { tr.remove(); }, "json"); location.reload(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal fade show" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" style="display: block;"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Ingridiants Detail</h4> </div> <div class="modal-body"> <div id="dvDetail">&nbsp;&nbsp;<table><tbody><tr><td>Name</td> <td>quantity</td></tr><tr><td>Chicken&nbsp;&nbsp;</td><td>1&nbsp;&nbsp;</td><td><a class="fa fa- times" id="btnRemove" title="Delete" data-value="Chicken"></a>&nbsp;&nbsp;</td></tr></tbody></table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data- dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 2

Problem: You were trying to find out closest tr closest tr means if element finds nearest closest element then it will stop at that place. So you need to traverse all the occurrence of tr than you find #btnRemove

Try below code hope it will help you.

 $('body #dvDetail').on('click', function() { if (confirm("Are you sure to delete this ingridients")) { var tr = $(this).find('tr #btnRemove'); var CartId = tr.attr('value'); alert(CartId); //Deletes the record with ID sent below $.post( '/RegisterFoods/DeleteIng/', { FoodName: CartId }, function(item) { tr.remove(); }, "json"); location.reload(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal fade show" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" style="display: block;"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Ingridiants Detail</h4> </div> <div class="modal-body"> <div id="dvDetail">&nbsp;&nbsp; <table> <tbody> <tr> <td>Name</td> <td>quantity</td> </tr> <tr> <td>Chicken&nbsp;&nbsp;</td> <td>1&nbsp;&nbsp;</td> <td> <a class="fa fa- times" id="btnRemove" title="Delete" value="Chicken"></a>&nbsp;&nbsp;</td> </tr> </tbody> </table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data- dismiss="modal">Close</button> </div> </div> </div> </div>