在 Node.js、Mongodb、Ajax、HTML 中删除问题

Posted 2023-03-07

【中文标题】在 Node.js、Mongodb、Ajax、HTML 中删除问题

【英文标题】：Problem with deleting in Node.js, Mongodb, Ajax, HTML

【发布时间】：2019-05-05 17:46:36

【问题描述】：

我的删除按钮无法正常工作。我有一个有 4 行的表，还有一个删除按钮。我已经编写了这段代码，并想通过 fileName 或 _id 删除一个任务。

Server.js 中的代码

app.delete("/deleteTask/:id", function (req, res) 
console.log("TEST");
const task_id = req.params.id;
taskCollection.deleteOne( "_id" : ObjectId(task_id) , function (err, success) 
    console.log(success);
    res.redirect("/");
);
res.send(); );

View.js 中的代码

$.ajax(
    "url": "/featured-tasks",
    "method": "GET"
).done(function(tasks) 
    tasks.forEach(function(task) 
        const taskCard =   "<tr class='task-card'>" +
                                 "<td class='title'>" + task.title +  "</td>" + "<td class='description'>" + task.description + "</td>" +
                                 "<td class='courses'>" + task.courses + "</td>" + 
                                 "<td class='task'>" + "<a href='/view?task=" + task.fileName + "'>" + task.fileName +"</a>" + "</td>" +
                                 "<td>" + "<button id='taskdelete' class='btn-delete' data-target='/deleteTask/' data-method='DELETE' data-disabled='true'>" + "Delete" +"</button>" + "</td>" +
                                 "</tr>";
        $(".task-gallery").append(taskCard);
    )
);


$('#taskdelete').on('click', function() 
    const taskFileName = $(this).attr('task.fileName');
    console.log("test");
    $.ajax(
       method: "DELETE",
       url: "/deleteTask/" + taskFileName,
       success: function(result)  
              location.reload();
          
       
    )
 );

表格的 html 片段：

<table class="task-gallery">
<tbody>
<tr class="tableHeader">
<th>Title</th>
<th>Description</th>
<th>Courses</th>
<th>PDF-file</th>
<th></th>
</tr>
<script src="home/home.js"></script>
<tr class="task-card">
<td class="title">Larman</td>
<td class="description">lektier</td>
<td class="courses">info</td>
<td class="task"><a href="/view?task=file.pdf">file.pdf</a></td>
<td><button class="btn-delete" data-filename="file.pdf" data-method="DELETE" data-disabled="true">Delete</button></td>
</tr>
</tbody>
</table>

【问题讨论】：

你确定这是正确的吗？ const taskFileName = $(this).attr('task.fileName');您的任务删除按钮似乎没有任何名为“task.fileName”的属性。

我不确定它是否正确。但不太清楚我做错了什么或为什么它不起作用。

你能在const taskFileName下面做一个console.log(taskFileName)吗？它应该返回您要删除的任务文档的 ID。

终端什么也没有出来，我的console.log("test")也没有，不知道哪里出错了，以前是

当你点击删除按钮时它应该会显示出来。

【参考方案1】：

您的前端代码有几处需要更改：

HTML 元素的 Id 值必须是唯一的，因此您不能使用点击处理程序 您需要将task.fileName 值设置为删除按钮的属性。 onclick 事件处理程序应位于容器元素上。

这里有一些更新的代码供您尝试：

$.ajax(
  "url": "/featured-tasks",
  "method": "GET"
).done(function(tasks) 
  tasks.forEach(function(task) 
      const taskCard = "<tr class='task-card'>" +
        "<td class='title'>" + task.title +  "</td>" + "<td class='description'>" + task.description + "</td>" +
        "<td class='courses'>" + task.courses + "</td>" + 
        "<td class='task'>" + "<a href='/view?task=" + task.fileName + "'>" + task.fileName +"</a>" + "</td>" +
        "<td>" + "<button class='btn-delete' data-filename='" + task.fileName + "' data-method='DELETE' data-disabled='true'>" + "Delete" +"</button>" + "</td>" +
        "</tr>";
      $(".task-gallery").append(taskCard);
    )
);


$('.task-gallery .btn-delete').on('click', function() 
  const taskFileName = $(this).attr('data-filename');
  console.log("test");
  $.ajax(
    method: "DELETE",
    url: "/deleteTask/" + taskFileName,
    success: function(result) 
      location.reload();
    
  )
);

在服务器端你应该检查错误：

app.delete("/deleteTask/:id", function (req, res) 
  console.log("TEST");
  const task_id = req.params.id;
  taskCollection.deleteOne( _id : ObjectId(task_id) , function (err, success) 
    if (err)
      console.log("failed");
      throw err;
    
    console.log(success);
    res.redirect("/");
  );
  res.send();
);

我提供的代码是正确的，运行代码sn -p自己验证一下：

var tasks = [
  
    title: "A Course",
    description: "Description of A",
    courses: "Course A",
    fileName: "file-A.pdf"
  ,
  
    title: "B Course",
    description: "Description of B",
    courses: "Course B",
    fileName: "file-B.pdf"
  ,
  
    title: "C Course",
    description: "Description of C",
    courses: "Course C",
    fileName: "file-C.pdf"
  
];

tasks.forEach(function(task) 
  const taskCard = "<tr class='task-card'>" +
  "<td class='title'>" + task.title +  "</td>" + "<td class='description'>" + task.description + "</td>" +
  "<td class='courses'>" + task.courses + "</td>" + 
  "<td class='task'>" + "<a href='/view?task=" + task.fileName + "'>" + task.fileName +"</a>" + "</td>" +
  "<td>" + "<button class='btn-delete' data-filename='" + task.fileName + "' data-method='DELETE' data-disabled='true'>" + "Delete" +"</button>" + "</td>" +
  "</tr>";
  $(".task-gallery").append(taskCard);
);

$('.task-gallery .btn-delete').on('click', function() 
  const taskFileName = $(this).attr('data-filename');
  // spit out the 'data-filename' value
  window.alert('Delete ' + taskFileName);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<table class="task-gallery">
  <tbody>
    <tr class="tableHeader">
      <th>Title</th>
      <th>Description</th>
      <th>Courses</th>
      <th>PDF-file</th>
      <th>&nbsp;</th>
    </tr>
  </tbody>
</table>

【讨论】：

谢谢。刚刚尝试了代码。但是有些东西不起作用，因为当我单击按钮时，我没有得到任何 console.log ()。

什么都没有。

在控制台窗口中运行这段代码，看看有多少匹配的元素：document.querySelectorAll('.task-gallery .btn-delete')

什么也没有出现，只是觉得我要重新开始

重新开始似乎是一种极端的措施——您应该解决问题，以便学习如何调试代码。如果document.querySelectorAll() 调用没有返回任何结果，那么选择器就是问题所在。你用的是什么浏览器？