Javascript 为什么我的Delete函数使用jquery只删除express中的第一个元素

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

main.js（我的主js库文件）

sport.js

（我的控制器js）

app.js（我的app.js文件）

---

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

现在我自己解决这个问题
list.pug（我的视图文件）只需更改id=sport\u 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

$(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();
            });
            });
        });
    });

main.js（我的主js库文件）而不是.form在form标记上定位并获取ID

var ID=$（form）。在下面查找（.ID”）.val（）

代码，并做一些小的更改

 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

$(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

而不是

findbyiandremove

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});
    })
};

---

就这样！！：）

不确定这与“仅删除第一个元素”（无论其含义是什么）有何关系，但提供了不正确的参数。应该是

Sport.findbyiandremove（req.params.id，function（err，Sport）{

。这意味着两者都只是一个

对象（即
findOneAndRemove（）
）和
req.params.id
而不是
req.body.id
，因为
id
在URL中，而不是在body中。@NeilLunn现在也删除了唯一的第一个元素，但点击了第二个元素除了纠正明显的错误之外，我还指出了你的“问题”不提供可复制的案例或演示任何人们可以自己“调试”的内容。在这里提问时，您确实需要这样做。至于“更明显的错误”，则有
$（“#id”）
，其中选择器中带有
的内容是“唯一的”。因此，一个页面上不可能有多个由该元素标识的元素，如果您这样做，则只会选择“第一个”。听起来您的标记中需要唯一的标识符，或者单击处理程序应该附加到特定的元素，但
$（'.form'）。每个（函数（）
对于对象的每个元素，那么为什么不选择……。？您可能在
中工作。each（）
但是您发送的值是
$（“#id”）.val（）
，它是整个页面上唯一的一个元素。您可能想命名事物
id=“id_1”
和
id=“id_2”
等等，并使用标记为
.form
或其他内容的元素的索引。但是您不能在标记中使用带有
id=“id”
的多个内容并期望它工作。这就是为什么我们首先使用“className”。要应用于“多个”内容，而不仅仅是“一个”。
$(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();
            });
            });
        });
    });

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});
    })
};