Question

当我按下特定元素的删除按钮时，我的删除功能只删除了第一个元素，是吗？ list.pug （我的视图文件）

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

main.js （我的主要js lib文件）

$(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（我的控制器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

now I resolve this issue myself
list.pug (my view file) just change id=sport_list.id and minor changes

 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

main.js(my main js lib file)instead of .form target on form Tag and getting ID var id = $(form).find(".id").val() code below with some minor changes

$(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 use findOneAndRemove instead of 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});
    })
};

Thats it!! :)

为什么我的删除功能只用jquery删除Express中的第一个elemet

1 个答案: