JQuery fadeout скрывает все DIVS

Question

Я использую некоторые jquery, чтобы скрыть некоторые woocommerce div, нажав на добавленную кнопку, но у меня возникла проблема, когда нажатие первой также закрывает вторую (т. Е. Сообщение woocommerce, а также woocommerce -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"); 
    }); 
}); 

Я собрал их вместе и попытался разделить их, а также использовать другой класс для кнопки. Любые указатели? Попытка узнать это сама, поскольку я иду так, что любая помощь очень ценится!

Edit: Это похоже на работу благодаря 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().

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