Calls to /actions return 400 Bad Request I'm trying to use jquery ( and/or VueJS with axios) to delete an asset from a frontend form (user is logged in and they have permissions to delete assets from this volume)

I have an HTML element that contains the fileID of the asset in question:

&lt;div class="deleteAsset" :data-fileID="20031"&gt;Delete&lt;/div&gt;


I have the following jQuery click action:

$('.deleteAsset').click(function() {
    window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName|e('js') }}";
    window.csrfTokenValue = "{{ craft.app.request.csrfToken|e('js') }}";

    var assetID = $(this).attr("data-fileID");
    var data = {};

    data[csrfTokenName] = csrfTokenValue;    
    data['assetId'] = assetID;
    data['dataType'] = 'json';
    data['action'] = '/actions/assets/delete-asset';

    $.post('/', data, function(response, textStatus, jqXHR) {
      console.log('clickResponse', response);
    });
});


However I keep getting the following error in the console when I click the "Delete" button:

POST https://website.com/ 404 (Not Found)


I have tried having the action URL in the $.post() call, but it has the same effect. 
Anyone have any suggestions?
You're close. Just a couple minor syntax things:


remove the colon (:) before :data-fileID
$.post has 4 parameters, the dataType (in this case 'json') goes as the last parameter.
Set the url parameter to the action.


This worked for me:

&lt;div class="deleteAsset" data-fileID="20031"&gt;Delete&lt;/div&gt;

&lt;script&gt;
  $('.deleteAsset').click(function() {
    window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName|e('js') }}";
    window.csrfTokenValue = "{{ craft.app.request.csrfToken|e('js') }}";

    var assetID = $(this).attr("data-fileID");
    var data = {};

    data[csrfTokenName] = csrfTokenValue;    
    data['assetId'] = assetID;

    $.post('/actions/assets/delete-asset', data, function(response, textStatus, jqXHR) {
      console.log('clickResponse', response);
    }, 'json');
  });
&lt;/script&gt;