javascript - PHP bootstrap 4 Delete button does not fetch ID

Solution:

Update your modal trigger button and attach a custom attribute and ID as its value.

<button  type="button"  class="btn btn-danger delete_btn"  data-toggle="modal" data-target="#deletemodal" delete-id = "<?php echo $row['id']; ?>"> DELETE </button>

When you trigger the button read the value and write it in modal dialog's hidden input. This way you can access your id and proceed for further steps. update your modal form as below.

<form action="code.php" method="POST">
  <div class="modal-body">
    <input type="hidden" name="delete_id" id="delete_id" />
    <h4> Are you sure want to delete this data? </h4>
  </div>
  <div class="modal-footer">
    <button type="submit" name="deletedata" class="btn btn-primary">Yes</button>
    <button type="button" class="btn btn-secondary delete_btn" data-dismiss="modal">No</button>
    
  </div>
</form>

Your jquery will be like

$('.delete_btn').on('click',function(){
    var id = $(this).attr('delete-id');
    $("#delete_id").val(id);

    $('#deletemodal').modal('show');  
        
        var data = $tr.children("td").map(function(){
            return $(this).text();
        }).get();
        console.log(data) ;
        $('#delete_id').val(data[0]);
    });
});

Solution:

Perhaps this is a usefull way for some people as well:

The button/div/span/url with data you want to delete:

<span class="deleteButton" data="DATA-YOU-WANT-TO-SEND" data-toggle="modal" data-target="#confirmDelete">click for delete</i></span>

The 1st jQuery

$(document).on( "click", ".deleteButton", function() {
    var string = $(this).attr('data');
    $('#item-record').attr('data-confirm',string);
});

Your button inside the (just opened) modal will get the data inside 'data-confirm':

<button type="button" class="btn btn-default DELETE-ITEM" data-dismiss="modal" id="item-record" data-confirm="">Yes, delete!</button>

Now you handle the request when DELETE-ITEM is confirmed

$(document).on( "click", ".DELETE-COMMENT", function() {
var yourData = $(this).attr('data-confirm');

$.ajax({
///DO YOUR STUFF