'DELETE'リクエストが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> 

これは私がDELETEリクエストを処理するために急行して使用していたルーティングです。

ROUTES：

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要求がうまく動作する、と私は問題を解決することができませんでしだ。コンソールにエラーが表示されません。

utilをapp.jsにインポートしましたので、問題ではありません。

基本的な考え方は、フォームが記入されるたびに新しい行が追加されるということです。

ページは次のようになります。

アイデアは、私はそれがクリックされますいつでも適切な行を削除するには、ごみ箱をしたいということですが、今、それは何もしません。

Answer 1

これはわかりました。私の問題は二重でした。

1）。 jqueryの$('Grab Element')ステートメントにフォントの素晴らしいセレクタを両方含める必要があるため、アイコンをクリックしたときにアイコンを実際に取得していませんでした。

2）。私のJSON配列に戻って私の空のオブジェクトを無理に勧めた

formulas.push(req.body) 

：私のルートでセクション私が述べてラインを持っていました。

CHANGE 1：

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

に変更しました：だから私は、次の変更を加えたこれらのエラーを修正するには

は

私はよく分からない

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

なぜあなたのことができセレクタとして1つのクラスを使用するだけです...私はそれがFont Awesomeに特有のものであると仮定しています。 （私が間違っていれば幸せになるだろう）。

CHANGE 2：

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

これがやったトリック、すべてのcopacetic：

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

に変更しました。