我正在使用 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&X-Amz-Credential=AKIAIL6J323MJQNSQPOQ%2F20151217%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20151217T161738Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=984baa326e5673e9c98c9edd94ce0e18ea58f2dd71da59e9061e5039caefbe73" alt="C75fda133cc1706a83409a2d9f948adfaf4f98533f64f2a17fbb27b06a2a?x amz algorithm=aws4 hmac sha256&x amz credential=akiail6j323mjqnsqpoq%2f20151217%2fap southeast 1%2fs3%2faws4 request&x amz date=20151217t161738z&x amz expires=900&x amz signedheaders=host&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&X-Amz-Credential=AKIAIL6J323MJQNSQPOQ%2F20151217%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20151217T161738Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=984baa326e5673e9c98c9edd94ce0e18ea58f2dd71da59e9061e5039caefbe73" alt="C75fda133cc1706a83409a2d9f948adfaf4f98533f64f2a17fbb27b06a2a?x amz algorithm=aws4 hmac sha256&x amz credential=akiail6j323mjqnsqpoq%2f20151217%2fap southeast 1%2fs3%2faws4 request&x amz date=20151217t161738z&x amz expires=900&x amz signedheaders=host&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>
最佳答案
更新您的_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从页面。
关于javascript - 如何在rails中使用jquery删除特定项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34338700/