使用AJAX删除HTML表行

I am trying to add the ability to remove a row from a table with an AJAX call. For some reason my click even is not firing and I'm not sure why since I have other AJAX buttons performing correctly. (Sorry, I can't figure out for the life of me how to display code properly on this site!!!)

Here is the Javascript in the header:

jQuery("#completeHarvestButton").on('click', function(){

        var asset = jQuery("#completeHarvestButton").val();

        jQuery('#' + asset).html(Image1);

        jQuery.ajax({
            type: 'POST',
            url: '//localhost/inventory/wp-admin/admin-ajax.php',
            data: {
                action: 'completeHarvestRequest',
                asset: asset,
            },
            success: function(data, textStatus, XMLHttpRequest){
                jQuery('#' + asset).remove();
            },
            error: function(MLHttpRequest, textStatus, errorThrown){
                alert(errorThrown);
            }
        });
    });

And here is the PHP function that creates the table which has the row I want to remove and the button which is supposed to fire the AJAX:

function get_harvest_items(){

     global $wpdb;
     $result = $wpdb->get_results ( "SELECT * FROM harvest WHERE complete = 0" );

$showHarvestItems =  '
    <table border="1">
        <tr>
            <th>Asset Tag</th>
            <th>Date Scanned</th>
            <th>Complete</th>
        </tr>';
        foreach($result as $print){
        $showHarvestItems .='<tr id='.$print->barcode.'>
            <td>'.$print->barcode.'</td>
            <td>'.$print->date.'</td>
            <td><button type="button" id="completeHarvestButton" value='.$print->barcode.'>Complete Harvest...</button></td>
          <tr>';
        } 

return $showHarvestItems;

}

You say your click event is not firing:

You're binding your jquery on call to the button with id='completeHarvestButton' but you will have multiple buttons all with this id as your code is within a for loop. Try using class instead of id.