在 Nodejs 中使用 Jquery Ajax 请求从数据库中删除

Question

我正在做一个 Nodejs 项目，目前正在处理删除存储在数据库中的项目（食谱）的删除请求。我查看了 Google 附近的其他类似帖子，但似乎无法查明我的问题的原因。我不断收到以下错误：

而且，我不确定为什么。我认为我做错的是错误地检索了食谱 _id，但我不完全确定。此项目 repo 的 link 是：https://github.com/halsheik/RecipeWarehouse.git。下面，我粘贴了我添加的代码的相关部分（尚未上传到 repo）。如果有任何帮助，我将不胜感激。

$(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

我无法理解以下代码的 objective:

$('.deleteButton').on('click', function(e){
        $target = $(e.target);
        const id = $target.attr('data-id');
//...

当在 deleteButton 上触发点击事件时，事件的目标只是本身，它没有 'data-id' 属性。

这样可以得到'id':

$('.deleteButton').on('click', function(){
        const id = $(this).parent().attr('data-id');
//...

在 Nodejs 中使用 Jquery Ajax 请求从数据库中删除

Deleting from Database Using Jquery Ajax Request in Nodejs

html

ajax

jquery

ejs

node.js