Delete button not sending data through Ajax

I have multiple delete buttons on a custom admin page in the backend of my wordpress account which effect a public webpage. In my html file I've got:

<td><button value = "2" onclick = "del(this.value)">Delete Project 2 Names</button></td>

with my script being

<script>        
        var ajaxurl = '<?=admin_url('admin-ajax.php'); ?>';
        function del(val){
                        var CellNum = val;
                        console.log(CellNum);
                        // url of the data that is to be delete
                        
                        $.post(ajaxurl, {
                            
                            action: 'DeleteProject',
                            data: CellNum,
                            
                        }), function (data, status) {};
                      }


</script>

Then in my custom_function.php:

function DeleteProject()
  { 
    global $wpdb;
    
    $DelNum = $_POST['data'];
    echo $DelNum;
    print_r($DelNum);

    $wpdb->query($wpdb->prepare('DELETE `fxq4_projectsignup1` WHERE ProjectNumber = %d', $DelNum));

    die();

  }

I am seeing the CellNum in the console.log but there is no sign that the DeleteProject Function is being entered.

Any clues?

Thank you very much!

Eve

The problem will be that you register the click event for id button1, but it does not exist. You also have a misspelt success callback for the jQuery.post.

Try this code:

<button value="2" id="button1">Delete Project 2 Names</button>

<script>
    var ajaxurl = '<?=admin_url("admin-ajax.php"); ?>';
    
    jQuery(document).ready(function ($) {
        $('#button1').click(function () {
            let CellNum = $(this).attr("value");
    
            // url of the data that is to be delete
            $.post(ajaxurl, {
                action: 'DeleteProject',
                data: CellNum,
            }, function (data, status) {
                // success callback
            });
        });
    });
</script>