Delete record using jquery ajax from a table whose rows are appended using ajax?

Question

I want to delete table record on click on delete button using jquery ajax. But table rows are populated in table body using ajax on document load.The problem is that I cant access/select delete button by class or even by Id. Something I understand is that it is due to ajax asynchronous nature. I tried (async:false) after this fix it is working. But google chrome is showing warning message in console, also it is not good practice. I actually want a better way to do this? can Anyone help me? Thanks in advance!

Answer 1

How to create a Minimal, Reproducible Example

My guess is you're trying to bind the click event to a dynamically generated button before it exists. Try binding to a parent that isn't dynamically generated then provide a selector for .on().

$('.table').on('click', 'button', function() { your code });

https://api.jquery.com/on/

Your warning is probably because async: false is blocking. It doesn't allow other code to execute until it's done.

What does "async: false" do in jQuery.ajax()?

Answer 2

Give all delete button class like <a href="javascript:;" class="someclass" data-id="3">Delete</a>

on click event do ajax call

<script type="text/javascript">
$('.someclass').unbind('click').bind('click', function(){

    // ajax call
    $.ajax({
        type:'POST',
        url:'delete.php',
        data:{id:$(this).data('id')},
        success: function(data){
            if(data=="YES"){
                $(this).parents('tr').remove();
            }else{
                console.log('error');
            }
        }

    })
});