Storing data for a POST request in href - bad practice?

Question

I'm writing a node.js app and am a bit concerned about how I'm building post data to send to the server. For example, when I want to delete a data item, I put the id of said item in the href attribute:

<a class='delete' href="1231">Delete this data</a>
<!-- href is based on a variable I'm pulling from the server -->

When that link is clicked, I prevent default actions and then run an ajax request:

//On click + ajax
body.on('click', '.delete', function(e){
e.preventDefault();
    $.ajax({
        type: 'POST',
        url: '/admin/report/detail/delete',
    data: {id: $(this).attr('href')},
    success: function(){
        //Success message
    },
    error: function(){
        //Error message
    }
});
});

I'm wondering, is it bad practice to use the href attribute in this manner? If so, what's the best way to store this data?

Answer 1

Use data attributes instead. Storing them in the href isn't semantic, what if you want to store IDs sometimes, and other data at other times? You can create as many data attributes as you like, giving them semantic names.

<a class="delete" data-id="1231" href="#">

Then in your javascript:

...
data: { id: $(this).data('id') }
...

OR

data: { id: $(this).attr('data-id') }