Deleting from Database Using Jquery Ajax Request in Nodejs

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 -->
            <a href="/recipes/createRecipe" id="newRecipeButton">+ Create New Recipe</a>
        </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">
                            <a href="#"><span class="deleteButton"><i class="fa fa-trash-o" data-id="<%= recipe._id %>" aria-hidden="true"></i></span></a>
                            
                            <div class="recipeContainerIndv">        
                                <a href="/recipes/<%= recipe._id %>"><img src="/uploads/<%= recipe.recipeImageFileName %>"/></a>
    
                                <a href="/recipes/<%= recipe._id %>" class="recipeTitle"> <%= recipe.recipeName %> </a>
                            </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');
//...