'删除'请求不删除Jquery和Express

Question

我正在使用node / express和jquery构建一个api，并且由于某种原因我的DELETE请求没有被触发。

JQUERY：

$('.formula-body').on('click', function (e) {
   if (e.target.className == 'fa-trash-o') {
      $.ajax({
         url: 'formula-api/' + e.target.id,
         type: 'DELETE',
         success: updateIngredient
      });
   }
});

function updateIngredient(data) {
   $('.formula-body').empty();
   var output = '';
   $.each(data, function (key, item) {
      output = `
    <tr>
      <td>${item.name}</td>
      <td>${item.amount}</td>
      <td>${item.notes}</td>
      <td><a><span id ="${key}" class="fa fa-trash-o">  </span></a></td>
    </tr>
    `;
      $('tbody').append(output);
   });
};

HTML：

<div class="centered">
<h2>Your Formula</h2>
  <table class="centered-block pure-table pure-table-striped formula-table">
    <thead class="thead-styled">
      <tr class="centered">
          <th>Ingredient</th>
          <th>Amount</th>
          <th>Notes</th>
          <th></th>
      </tr>
    </thead>
    <tbody class="formula-body">
    </tbody>
  </table>

这是我用express来处理DELETE请求的路由。

途径：

var app = require('express');
var router = app.Router();
var formulas = require('../data/formula.json');

router.get('/formula-api', function(req, res){
  res.json(formulas);
});

router.post('/formula-api', function(req, res){
  formulas.push(req.body);
  res.json(formulas);
});

router.delete('/formula-api/:id', function(req, res) {
  formulas.splice(req.params.id, 1);
  formulas.push(req.body);
  res.json(formulas);
});

module.exports = router;

POST和GET请求工作正常，我无法解决问题。控制台没有错误。

我已将body-parser util导入app.js，因此这不应成为问题。

基本的想法是，每次填写表单时，我都有一个附加了新行的表。

页面如下所示：

我的想法是，我希望垃圾桶在点击时删除相应的行，但现在它什么都不做。

Answer 1

好的，想出这个。我的问题是双重的。

1）。当我点击它时，我实际上并没有抓住图标，因为我需要在jquery的$('Grab Element')语句中包含两个字体很棒的选择器。

2）。在我的路线部分，我有一行说明：

formulas.push(req.body)

将我的空对象推回到我的JSON数组中。

为了纠正这些错误，我做了以下更改：

更改1：

if (e.target.className == 'fa-trash-o') {

改为：

if (e.target.className == 'fa fa-trash-o') {

我不确定为什么你不能只使用一个班级作为选择器.....我假设它是Font Awesome特有的东西。 （如果我错了，很乐意纠正。）

更改2：

router.delete('/formula-api/:id', function(req, res) {
  formulas.splice(req.params.id, 1);
  formulas.push(req.body);
  res.json(formulas);
});

改为：

router.delete('/formula-api/:id', function(req, res) {
  formulas.splice(req.params.id, 1);
  res.json(formulas);
});

这就是伎俩和一切的共同作用。