Jquery fadeoutはすべてのDIVSを非表示にします

Question

私はいくつかのwoocommerce divを追加ボタンをクリックして非表示にしていますが、最初のものをクリックすると2番目のウインドウ-info div）。

jQuery(function($) { 
    $('.woocommerce-message').append('<button class="hideme1">x</a>'); 
    $("button.hideme1").click(function() { 
     $(".woocommerce-message").fadeOut("slow"); 
    }); 

}); 

jQuery(function($) { 
    $('.woocommerce-info').append('<button class="hideme2">x</a>'); 
    $("button.hideme2").click(function() { 
     $(".woocommerce-info").fadeOut("slow"); 
    }); 
}); 

私はそれらを一緒に持っていて、それらを分割してボタンの別のクラスを使用してみました。すべてのポインタ？私がこのように自分自身を学びようとしているので、どんな助けにも大いに感謝しています！

編集：これはSatpalとロリーのおかげで動作するようです。

jQuery(function($) { 
    $('.woocommerce-message').append('<button class="hideme">x</a>'); 
    $('.woocommerce-info').append('<button class="hideme">x</a>'); 
    $("button.hideme").click(function() { 
     $(this).closest(".woocommerce-message").fadeOut("slow"); 
     $("button.hideme").click(function() { 
      $(".woocommerce-info").fadeOut("slow"); 
     }); 
    }) 
}) 

私のjquery/jsはスクランブルエッグと醜いです！

Answer 1

.closest()を使用して、現在の要素コンテキストの親要素をターゲットにする必要があります。あなたが別のDOM準備ハンドラを使用する必要はありません

$('.woocommerce-message').append('<button class="hideme1">x</a>'); 
$("button.hideme1").click(function() { 
    $(this).closest(".woocommerce-message").fadeOut("slow"); 
});