项目基础内容

#去除turbolinks
rails new tutorialapp --skip-turbolinks

#添加gem
gem 'jquery-rails'

#更新js（去除默认的turbolinks）
//= require jquery3
//= require jquery_ujs

项目内容

#resource框架
rails g resource tutorial title:string url:string

#tutorials_controller.rb
class TutorialsController < ApplicationController
  def index
    @tutorials = Tutorial.all
  end

  def create
    @tutorial = Tutorial.new(params[:tutorial].permit(:title, :url))
    if @tutorial.save
      render partial: "tutorial", locals: {tutorial: @tutorial}
    end
  end

  def destroy
    @tutorial = Tutorial.find(params[:id])
    @tutorial.destroy
    render json: @tutorial
  end
end

#view/tutorial

#index.html.erb
<h1>Tutorials</h1>
<ul id=tutorials>
  <%= render @tutorials %>
</ul>
<%= form_with model: Tutorial.new, data: {'js-tutorial-form' => true} do |form| %>
  Title <%= form.text_field :title %><br>
  URL <%= form.text_field :url %><br>
  <%= form.submit %>
<% end %>

#_tutorial.html.erb
<li data-js-tutorial-id=<%= tutorial.id %>>
  <%= tutorial.title %> <%= link_to "Delete", tutorial, remote: true, method: :delete, 
    data: { confirm: "Are you sure you want to delete '#{tutorial.title}'?" } %>
</li>

#application.js
$(document).ready(function() {
  //添加
  $('[data-js-tutorial-form]').on("ajax:success", function(event, data, status, xhr){
    var tutorial = $(xhr.responseText).hide();
    $('#tutorials').append(tutorial);
    tutorial.fadeIn(2000);
  });

  //删除
  $('[data-js-tutorial-id]').on("ajax:success", function(event, data, status, xhr){
    var tutorial_id = xhr.responseJSON.id;
    $('[data-js-tutorial-id=' + tutorial_id + ']').hide();
  });
});