I'm trying to hide an html column with a click of a button with jQuery hide method.
Here's my html:
%br.clear
- @cards.each do |card|
%div{class: "hide_#{card.id}"} <- added this to solve issue
.existing-credit-card-details.nine.columns.omega.alpha{id: dom_id(card)} <- this is my target
.cc-select.one.column.alpha.omega
Random text here
.cc-type.three.columns.alpha.omega{class: card.card_type.downcase}
%span.mobile-heading.em Card Type
.icon
%span.type= card.card_type
.cc-number.two.columns.alpha.omega
%span.mobile-heading.em Number
****
Random text here
.cc-expiration.two.columns.alpha.omega
%span.mobile-heading.em Expiration Date
Random card expiration dates
.cc-expiration.two.columns.alpha.omega
%span.mobile-heading.em
= link_to (image_tag("icons/delete.png")),
spree.credit_card_url(card),
:remote => true, :method => :delete,
:id => 'delete_card'
%br.clear
![This is how it looks][1]
The link_to button is equal to: <a href="http://localhost:9393/credit_cards/12211" id="delete_card" data-method="delete" data-remote="true" rel="nofollow"><img alt="Delete" src="/assets/icons/delete.png"></a>
I tried with the following Javascript:
$(document).ready(function(){
$("#delete_card").click(function(){
$(".existing-credit-card-details nine columns omega alpha" id="<%= dom_id(card) %>").hide(1000);
});
});
So when I click on #delete_card .existing-credit-card-details.nine.columns.omega.alpha{id: dom_id(card)} should be hidden.
I've tried to figure it out by looking at other questions and browsing online, but my JS skills are lacking.
Solution:
Added:
$(document).ready(function(){
$(".delete_card").on("click", function(){
$(this).parents(".hide_#{card.id}").hide("fast");
});
});
Okay, I think you can do the following:
$("#delete_card").click(function(){
$(".existing-credit-card-details nine columns omega alpha").find('id', 'the id you are looking for').hide(1000);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.