javascript - 如何在rails中使用jquery删除特定项目？

Question

我正在使用 ajax 创建图像。

我正在附加这样新添加的图像

create.js.erb

$("#photos .row").append("<%= j render(@photo) %>")

_photo.html.erb

<div class="col-md-4">
  <div class="panel panel-default">
    <div class="panel-heading-preview">
      <%= image_tag photo.image_url(:thumb) %>
    </div>
    <div class="panel-body">
          <span class="pull-right">
            <%= link_to listing_photo_path(@listing, photo), remote: true, method: :delete, data: {confirm: "Are you sure?"} do %>
      <i class="fa fa-times fa-lg"></i>
                <% end %>
          </span>
    </div>
  </div>
</div>

这是我的 View 文件，一切都发生在其中:index.html.erb

<div id="photos">
    <div class="row">
    <%= render @photos %>
    </div>
  </div>

上面的一切都工作正常..但是如何使用ajax删除图像？？？

listings_controller.rb

def destroy
    @photo = @listing.photos.find(params[:id])
    @photo_id=@photo.id
    @photo.destroy
 end

destroy.js.erb

So in destroy how can I remove an image? via ajax??The destroy method is currently working but need to refresh the page to see the effect. How can I grab the deleted photo and remove that from view??

更新

<div id="photos">
    <div class="row">

# This will be one image
    <div class="col-md-4">
  <div class="panel panel-default">
    <div class="panel-heading-preview">
      <img src="https://testing-dev-1.amazonaws.com/cache/c75fda133cc1706a83409a2d9f948adfaf4f98533f64f2a17fbb27b06a2a?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAIL6J323MJQNSQPOQ%2F20151217%2Fap-southeast-1%2Fs3%2Faws4_request&amp;X-Amz-Date=20151217T161738Z&amp;X-Amz-Expires=900&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=984baa326e5673e9c98c9edd94ce0e18ea58f2dd71da59e9061e5039caefbe73" alt="C75fda133cc1706a83409a2d9f948adfaf4f98533f64f2a17fbb27b06a2a?x amz algorithm=aws4 hmac sha256&amp;x amz credential=akiail6j323mjqnsqpoq%2f20151217%2fap southeast 1%2fs3%2faws4 request&amp;x amz date=20151217t161738z&amp;x amz expires=900&amp;x amz signedheaders=host&amp;x amz signature=984baa326e5673e9c98c9edd94ce0e18ea58f2dd71da59e9061e5039caefbe73">
    </div>
    <div class="panel-body">
          <span class="pull-right">
            <a data-confirm="Are you sure?" data-remote="true" rel="nofollow" data-method="delete" href="/listings/1/photos/35">
      <i class="fa fa-times fa-lg"></i>
</a>          </span>
    </div>
  </div>
</div>
# The first image end

# This will be second image
    <div class="col-md-4">
  <div class="panel panel-default">
    <div class="panel-heading-preview">
      <img src="https://testing-dev-1.amazonaws.com/cache/c75fda133cc1706a83409a2d9f948adfaf4f98533f64f2a17fbb27b06a2a?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAIL6J323MJQNSQPOQ%2F20151217%2Fap-southeast-1%2Fs3%2Faws4_request&amp;X-Amz-Date=20151217T161738Z&amp;X-Amz-Expires=900&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=984baa326e5673e9c98c9edd94ce0e18ea58f2dd71da59e9061e5039caefbe73" alt="C75fda133cc1706a83409a2d9f948adfaf4f98533f64f2a17fbb27b06a2a?x amz algorithm=aws4 hmac sha256&amp;x amz credential=akiail6j323mjqnsqpoq%2f20151217%2fap southeast 1%2fs3%2faws4 request&amp;x amz date=20151217t161738z&amp;x amz expires=900&amp;x amz signedheaders=host&amp;x amz signature=984baa326e5673e9c98c9edd94ce0e18ea58f2dd71da59e9061e5039caefbe73">
    </div>
    <div class="panel-body">
          <span class="pull-right">
            <a data-confirm="Are you sure?" data-remote="true" rel="nofollow" data-method="delete" href="/listings/1/photos/35">
      <i class="fa fa-times fa-lg"></i>
</a>          </span>
    </div>
  </div>
</div>
# The second image end



</div>
      </div>

Answer 1

更新您的_photo.html.erb偏向保持独特id如下:

<div class="col-md-4" id="<%= dom_id(photo) %>">
  <div class="panel panel-default">
    <div class="panel-heading-preview">
      <%= image_tag photo.image_url(:thumb) %>
    </div>
    <div class="panel-body">
          <span class="pull-right">
            <%= link_to listing_photo_path(@listing, photo), remote: true, method: :delete, data: {confirm: "Are you sure?"} do %>
      <i class="fa fa-times fa-lg"></i>
                <% end %>
          </span>
    </div>
  </div>
</div>

添加id="<%= dom_id(photo) %>"会给每张照片一个独特的 id ，然后，您可以定位此 id来自您的destroy.js.erb文件，删除带有 id 的 div从页面。