jQuery使用Rails和HAML上的link_to通過按鈕單擊隱藏html列

Question

我試圖用jQuery hide方法單擊按鈕來隱藏html列。

這是我的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

！[看起來是這樣] [1]

link_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>

我嘗試使用以下Javascript：

      $(document).ready(function(){
        $("#delete_card").click(function(){
          $(".existing-credit-card-details nine columns omega alpha" id="<%= dom_id(card) %>").hide(1000);
        });
      });

因此，當我單擊#delete_card時，existing-credit-card-details.nine.columns.omega.alpha {id：dom_id（card）}應該被隱藏。

我試圖通過查看其他問題並在線瀏覽來解決問題，但是我的JS技能卻缺乏。

解：

添加：

      $(document).ready(function(){
        $(".delete_card").on("click", function(){
          $(this).parents(".hide_#{card.id}").hide("fast");
        });
      });

Answer 1

好的，我認為您可以執行以下操作：

$("#delete_card").click(function(){ 
     $(".existing-credit-card-details nine columns omega alpha").find('id', 'the id you are looking for').hide(1000);
});