Ajax DELETE 请求似乎只删除列表中的第一项答案

【问题标题】：Ajax DELETE request seems to remove first item on the list onlyAjax DELETE 请求似乎只删除列表中的第一项
【发布时间】：2017-07-13 03:37:25
【问题描述】：

我一直在为不同的项目重复使用这些代码，但对于这个项目，它似乎不起作用。我正在将 Express 与 Mongoose 一起使用，并在其中存储大学课程详细信息的列表。这是架构。

exports = module.exports = function(app, mongoose) {
  var moduleSchema = new mongoose.Schema({
    pivot: { type: String, default: '' },
    module_name: { type: String, required:true},
    module_code: {type: String, required: true},
    description: {type: String}
  });
  moduleSchema.plugin(require('./plugins/pagedFind'));
  moduleSchema.index({ pivot: 1 });
  moduleSchema.index({ module_name: 1 });
  moduleSchema.index({ module_code: 1 });
  moduleSchema.index({ description: 1 });
  moduleSchema.index({ search: 1 });
  moduleSchema.set('autoIndex', (app.get('env') === 'development'));
  app.db.model('Module', moduleSchema);
};

删除请求是这样通过路由器发出的：

app.delete('/modules/delete/:id', require('./views/modules/index').delete);

然后在 ./views/modules/index 我写了“删除”函数：

exports.delete = function(req, res){
  var workflow = req.app.utility.workflow(req, res);

  workflow.on('validate', function() {
    workflow.emit('deleteModule');
  });

  workflow.on('deleteModule', function(){
    req.app.db.models.Module.findOneAndRemove({_id: req.params.id}, function(err){
      if(err){
        return workflow.emit('exception', err);
      }
        req.flash('success', 'Module Deleted!');
        res.redirect('/modules/');
    });
  });
  workflow.emit('validate');

};

因此，要运行该函数，我必须像这样进行 ajax 调用：

$(document).ready(function(){
	$("#deleteModule").on('click', function(e){
		e.preventDefault();
		var deleteId = $('#deleteModule').data('delete');
		$.ajax({
			url: '/modules/delete/'+ deleteId,
			type:'delete',
			success: function(result){
				console.log(result);
			},
      error: function(error){
        console.log(error);
      }
		});
		window.location = '/modules/';
	});
});

这里是显示项目列表的玉代码：

  ul.list-group
    each module, i in data
      li.list-group-item
        strong #{module.module_code} - #{module.module_name}
        hr
        p #{module.description}
        a(href='/modules/edit/#{module._id}', class='btn btn-primary') Edit
        a(id='deleteModule', data-delete='#{module._id}', class='btn btn-danger pull-right', href="#") Delete

似乎一切正常，除了现在我只能通过 UI 删除页面上的顶部项目，单击任何其他删除按钮会将我重定向到顶部并且没有任何反应。

【问题讨论】：

标签： javascript jquery node.js ajax express

【解决方案1】：

由于id 在 HTML 页面中必须是唯一的，因此请使用类而不是 id 并与它绑定删除功能，

// use .deleteModule instead of #deleteModule
$(".deleteModule").on('click', function(e){
    e.preventDefault();
    var deleteId = $(this).data('delete'); // here use this instead of  using id #deleteModule
    $.ajax({
        url: '/modules/delete/'+ deleteId,
        type:'delete',
        success: function(result){
            console.log(result);
        },
        error: function(error){
          console.log(error);
        }
    });
    window.location = '/modules/';
});

并在 HTML 模板中添加 deleteModule 类，

ul.list-group
    each module, i in data
      li.list-group-item
        strong #{module.module_code} - #{module.module_name}
        hr
        p #{module.description}
        a(href='/modules/edit/#{module._id}', class='btn btn-primary') Edit
        a(id='deleteModule', data-delete='#{module._id}', class='btn btn-danger pull-right deleteModule', href="#") Delete

【讨论】：