javascript - 为什么我的删除函数只删除 jquery 中express中的第一个元素

Question

当我按下特定元素的删除按钮时，我的删除功能仅删除第一个元素，y？ list.pug(我的 View 文件)

ul
        each sport_list in sports_list
            li(class='form'):  a(href='/sport/'+sport_list.name) #{sport_list.name}

            form.form-horizontal(class='delete')
                input(type='hidden', name='_csrf', value=_csrf id='_csrf')
                input(type='hidden', name='id', value=sport_list.id id='id')
                .form-group
                    .col-sm-offset-3.col-sm-7
                        button.btn.btn-success(type='submit' class='form')
                            i.fa.fa-trash-o
                            | Delete

        else
            li There are no Sport

ma​​in.js(我的主 js 库文件)

$(function() {
        $('.form').each(function() {
            $(this).click(function(e) {
                e.preventDefault();

                $.ajax({
                    method: "POST",
                    url: '/deleteSport' + $("#id").val(),
                    data: {_csrf: $("#_csrf").val(), id: $("#id").val()}
                    // success: function(result) {
                    //     // Do something with the result
                    //     console.log('succesfully deleted'+result);
                    // }
                })
                    .done(function (json) {
                        console.log($("#id").val())
                        console.log(json);
                        $('.form').show();
                    });
            }); //missing ); here!
        });
    });

sport.js(我的 Controller js)

exports.deleteSport = (req, res) => {

    Sport.findByIdAndRemove({_id: req.body.id}, function(err, sport) {

        console.log(err,sport)
        if (err) {
            req.flash('errors', {msg: 'Something wrong'})
        }


        //res.redirect('/listsports');
        res.json({error:err,sport:sport});
    })
};

app.js(我的 app.js 文件)

app.post('/deleteSport:id', sportController.deleteSport);

这里有人可以告诉我我犯了什么错误吗？

Answer 1

现在我自己解决这个问题
list.pug(我的 View 文件)只需更改id=sport_list.id和细微更改

 ul(class='listItem')
        each sport_list in sports_list
            li
                a(href='/sport/'+sport_list.name) #{sport_list.name}

                form.form-horizontal(class='delete')
                    input(type='hidden', name='_csrf', value=_csrf id='_csrf')
                    input(type='hidden', name='id', class="id" value=sport_list.id id=sport_list.id)
                    .form-group
                        .col-sm-offset-3.col-sm-7
                            button.btn.btn-success(type='submit' class='deletebutton')
                                i.fa.fa-trash-o
                                | Delete

            button.btn.btn-success(type='submit')
                i.fa.fa-trash-o
                | Delete

        else
            li There are no Sport

ma​​in.js(我的主js库文件)而不是form标签上的.form目标并获取ID var id = $(form).find(".id").val() 下面的代码进行了一些细微的更改

$(function() {
        $('form').each(function() {
            var form = this;
            $(form).find(".deletebutton").click(function(e) {
                e.preventDefault();


                var id = $(form).find(".id").val()
                $.ajax({
                    method: "POST",
                    url: '/deleteSport/' + id,
                    data: {_csrf: $("#_csrf").val(), id: id}

                })
                    .done(function (json) {
                        console.log($("#id").val())
                        console.log(json);
                        $(form).closest('.listItem').remove();
            });
            });
        });
    });

sport.js 使用 findOneAndRemove 而不是 findByIdAndRemove

exports.deleteSport = (req, res) => {

    Sport.findOneAndRemove({_id: req.params.id}, function(err, sport) {

        console.log(err,sport)
        if (err) {
            req.flash('errors', {msg: 'Something wrong'})
        }


        //res.redirect('/listsports');
        res.json({error:err,sport:sport});
    })
};

就是这样!! :)