Deleting from Database Using Jquery Ajax Request in Nodejs - html

Question

I am working on a Nodejs project and currently working on delete requests to delete items (recipes) stored in a database. I have looked at other similar posts and around Google but can't seem to pinpoint the cause of my problem. I keep getting the following error:
And, I am unsure why. What I believe I am doing wrong is retrieving the Recipe _id incorrectly, but am not completely sure. The link to this project repo is: https://github.com/halsheik/RecipeWarehouse.git. Below, I have pasted the relevant portions of my code that I have added (not yet uploaded to repo). I'd appreciate any assistance.
$(document).ready(function(){
$(".secondaryContainer").hover(function(){
$(this).find(".deleteButton").fadeIn();
}, function(){
$(this).find(".deleteButton").hide();
});
$('.deleteButton').on('click', function(event){
$target = $(event.target);
const id = $target.attr('data-id');
$.ajax({
type:'DELETE',
url: 'article/' + id,
success: function(res){
window.location.href='/articles/myRecipes'
},
error: function(err){
console.log(err);
}
});
});
});
// Delete recipe
router.delete('/:id', function(req, res){
const query = {_id: req.params.id}
Recipe.remove(query, function(err){
if(err){
console.log(err);
throw err;
}
res.send('Success');
});
});
<%- include('../_partial/_header'); -%>
<!-- Container for all of a user's recipes -->
<div id="recipesContainer">
<div id="myRecipesContainer">
<label id="myRecipesLabel">My Recipes</label>
<!-- Button to Create a New Recipe -->
+ Create New Recipe
</div>
<!-- Displays each individual recipe (The name and image) -->
<div id="allRecipes">
<% if(recipes.length > 0) { %>
<% recipes.forEach(function(recipe){ %>
<% if(recipe.author == user._id){ %>
<div class="secondaryContainer">
<span class="deleteButton"><i class="fa fa-trash-o" data-id="<%= recipe._id %>" aria-hidden="true"></i></span>
<div class="recipeContainerIndv">
<img src="/uploads/<%= recipe.recipeImageFileName %>"/>
<%= recipe.recipeName %>
</div>
</div>
<% } %>
<% }); %>
<% } else { %>
<div id="noRecipesContainer">
<a id="noRecipes">You Currently Have No Recipes!</a>
</div>
<% } %>
</div>
</div>
<%- include('../_partial/_footer'); -%>

Answer 1

I can't understand the objective of the following code:
$('.deleteButton').on('click', function(e){
$target = $(e.target);
const id = $target.attr('data-id');
//...
When click event is triggered on deleteButton, the event's target is just the <span.deleteButton> itself which has no 'data-id' attribute.
In this way you can get 'id':
$('.deleteButton').on('click', function(){
const id = $(this).parent().attr('data-id');
//...