Javascript rails实时删除元素

获取了从当前用户屏幕中删除消息的链接：

= link_to '[x]', msg, method: :delete, remote: true, class: "del-link"

它会触发此coffeescript功能：

delete_message = () ->
$('.del-link').on 'ajax:success', (event) ->
  event.preventDefault()
  $(this).closest('.message').remove()
  return

这种方法：

def destroy
  @msg = Msg.find(params[:id])
  @msg.destroy

  respond_to do |format|
    format.html { redirect_to chat_path }
    format.json { head :no_content }
    format.js   { render :layout => false }
  end
end

但是，如何在每个用户屏幕上删除消息，例如使用ActionCable

聊天的咖啡脚本：

App.proom = App.cable.subscriptions.create "ProomChannel",
  connected: ->
    # Called when the subscription is ready for use on the server

  disconnected: ->
    # Called when the subscription has been terminated by the server

  received: (data) ->
    unless data.msg.blank?
        $('#messages-table').append data.msg
        scroll_bottom()


 $(document).on "turbolinks:load", ->
   submit_msg()
   scroll_bottom()
   delete_message()

频道.rb

class ProomChannel < ApplicationCable::Channel
  def subscribed
    stream_from "proom_channel"
  end

  def unsubscribed
  end
end

此外，我还向每个包含消息记录ID的message div元素添加了一个ID，以便使用以下行查找并从DOM中删除它

$("msg_#{msg.id}").remove()

---

但是现在我不知道把它放在哪里。

我现在不能给你完整的答案，但是如果你找不到解决方案，我会在以后更新我的答案：

与使用action cable创建消息一样，在DB中保存消息后，会触发一个

ActionCable.server.broadcast“messages”

，该消息将执行一些JS，例如在用户浏览器资产管道文件

app/assets/javascripts/channels/messages.JS中包含的JS

这是我的消息控制器，保存消息后，我启动
Server.broadcast
进程。它将触发my
messages_channel.rb中的进程，该进程将更新订阅该频道的所有客户端

  def create
    message = Message.new(message_params)
    message.user = current_user 
    chatroom = message.chatroom
    if message.save
        ActionCable.server.broadcast 'messages',
        message: message.content,
        user: message.user.name,
        chatroom_id: message.chatroom_id,
        lastuser: chatroom.messages.last(2)[0].user.name
      head :ok
    end
  end

图像和文本来自以下文章：

我们将新的订阅添加到消费者中
App.cable.subscriptions.create。我们给这个函数一个参数
我们要订阅的频道的名称，
信息学院

调用此subscriptions.create函数时，它将调用
MessagesChannel#subscribed方法，实际上是一个回调方法

MessagesChannel#从我们的消息广播中订阅流，
将任何新消息作为JSON发送到客户端订阅
功能

然后，调用接收到的函数，参数为
消息JSON。接收到的函数依次调用一个helper函数
我们已经定义了renderMessage，它只是附加新消息
使用$（“#messages”）jQuery选择器，可以
在聊天室节目页面上找到


频道将调用
messages.js
函数
received
，该函数将div附加到DOM中，您需要在
messages.js
中调用另一个操作

App.messages = App.cable.subscriptions.create('MessagesChannel', {      
  received: function(data) {
      // code executed - the parameters will be in data.chatroom_id and 
      // data.user, data.message etc...
  }
});

因此，您需要从操作
messages#destroy
中调用通道，在
messages.js中使用一个特定函数从DOM中删除div。
我不知道您是否需要创建特定的服务器端频道，或者您可以编辑当前的
消息\u channel.rb
以包含特定功能。。你需要阅读这些指南并弄明白这一点。。我以后可能会试试，但现在不行

或者一个简单的替代方法，只需在
messages.js
中编写一些js来解决这个问题，并在需要时删除div。。例如，
messages#destroy
操作可以传递一个参数，如果该参数存在，您将删除该消息，而不是添加它

似乎出现了一些编辑失误，因为开头的段落在第一个代码块之后重复。@vijoc我不知道你的意思我想你把前两段粘贴到了第一个代码块中，因为你弄错了，现在它在下面，但它仍然是一个repetition@FabrizioBertoglio请看一下我的最新问题
App.messages = App.cable.subscriptions.create('MessagesChannel', {      
  received: function(data) {
      // code executed - the parameters will be in data.chatroom_id and 
      // data.user, data.message etc...
  }
});