Jquery Dropzone，可以从数据库中销毁，但不能从其容器中销毁

我有一个新的图片页面，用户可以上传船图片。所以船模型和图片模型是相互关联的，它们是嵌套的路线。问题是，我使用Carrierwave和Dropzone。写入数据库工作正常。我一直在为嵌套路由的销毁操作而挣扎，因为我也不是jquery方面的专家。所以现在，当我单击删除按钮时，它实际上会从数据库中销毁图片，但图片仍保留在Dropzone容器中

在这里

这是日志输出

>Boat.last.pictures.all
  Boat Load (0.3ms)  SELECT  "boats".* FROM "boats"  ORDER BY "boats"."id" DESC LIMIT 1
  Picture Load (0.4ms)  SELECT "pictures".* FROM "pictures" WHERE "pictures"."boat_id" = ?  [["boat_id", 137]]
=> #<ActiveRecord::AssociationRelation [#<Picture id: 645, name: nil, boat_id: 137, created_at: "2015-04-24 22:13:29", updated_at: "2015-04-24 22:13:29", image: "imgres-3.jpg">]>

以及图像控制器

#创建

操作

def create

    @picture = @boat.pictures.new(picture_params)

    if @picture.save
    render json: { message: "success", fileID: @picture.id, boatID: @boat.id }, :status => 200

    else
      render json: { error: @picture.errors.full_messages.join(',')}, :status => 400

    end

  end

#销毁

操作

def destroy

    @picture = @boat.pictures.find(params[:id])
    if @picture.destroy
     render json: { message: "File deleted from server" }
    else
      render json: { message: @upload.errors.full_messages.join(',') }
    end
  end

---

如前所述，问题在于jquery，删除的文件保留在那里。。谢谢

将这两行添加到removedfile eventhandler函数中：

var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;

在此之后，处理程序函数应如下所示：

removedfile: function(file){

    // grap the id of the uploaded file we set earlier
    var id = $(file.previewTemplate).find('.dz-remove').attr('id'); 
    var boat_id = $(file.previewTemplate).find('.dz-remove').attr('boat_id'); 
    // make a DELETE ajax request to delete the file
    $.ajax({
        type: 'DELETE',
        url: '/boats/' + boat_id + '/pictures/' + id,
        success: function(data){
            console.log(data.message);
        }
    });

    var _ref;
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}

这应该能奏效

var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;

removedfile: function(file){

    // grap the id of the uploaded file we set earlier
    var id = $(file.previewTemplate).find('.dz-remove').attr('id'); 
    var boat_id = $(file.previewTemplate).find('.dz-remove').attr('boat_id'); 
    // make a DELETE ajax request to delete the file
    $.ajax({
        type: 'DELETE',
        url: '/boats/' + boat_id + '/pictures/' + id,
        success: function(data){
            console.log(data.message);
        }
    });

    var _ref;
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}