The opposite of insert_adjacent_html for CableReady channel?

Question

Problem has been answered -- see post below

I have a CableReady channel 'Current' which dynamically shows a feed of 'Posts'. I can get the posts to appear individually just fine, but I can't work out how to remove them from the channel individually.

This input of Posts to the channel is controlled in the PostsController.rb like so:

def postshow
  @post = Post.find(params[:id])
  cable_ready["current"].insert_adjacent_html(
    selector: "#current#{@video.id}",
    position: "afterbegin",
    html: render_to_string(partial: "posts/post", locals: {post: @post})
  )
  cable_ready.broadcast
end

I've tried a remove method e.g. cable_ready["current"].remove(... but this just removes all of the Posts in the channel in one go

I plan to use another method in my PostsController.rb to perform the remove:

def postremove
  @post = Post.find(params[:id]
  ...[code to remove the post here]
end

I don't want to remove the Post from the DOM entirely because the feed is dynamic and I want them to be able to show in the feed again at some point.

Edited: Further explanation of wanted behaviour

Imagine the feed to be like twitter, new posts appear at the top. But these posts only appear for a certain number of seconds. You can can also rewind the feed to a certain point. So a post that was taken off the feed can appear again at the top if you rewind the time.

Any ideas or suggestions of other tactics are appreciated, thanks

Answer 1

Thanks to Roland Studer for this answer:

The problem was due to the partial not having a proper identifier. The outer-most div of the partial now looks like this:

<div id="<%= dom_id(post)%>" ... >

and the controller method for removing the Post now looks like this:

def postremove
    @post = Post.find(params[:id])
    cable_ready["current"].remove(
      selector: "[data-id=\"#{@post.id}\"]"
    )
    cable_ready.broadcast
end

Magic! :)

Answer 2

Since you don't want to remove the post from the DOM then perhaps one solution would be to simply hide the post. You can use the method below to set a CSS property. Alternatively if you use a CSS framework you could just add a class via: