I have this button with multiple data attributes, and i want to hide it by selecting it based on class and two data attributes.

<a href='#' class='wishlist-icon' data-wish-name='product' data-wish-url='/product'>Button</a>

$(".wishlist-icon [data-wish-name='product'] [data-wish-url='/product']").hide();

I don't know why this selector doesn't work.

DEMO

I have this button with multiple data attributes, and i want to hide it by selecting it based on class and two data attributes.

<a href='#' class='wishlist-icon' data-wish-name='product' data-wish-url='/product'>Button</a>

$(".wishlist-icon [data-wish-name='product'] [data-wish-url='/product']").hide();

I don't know why this selector doesn't work.

DEMO

• javascript
• jquery
• html
• custom-data-attribute

Share Improve this question Follow asked Sep 14, 2013 at 10:27 DušanDušan 49822 gold badges99 silver badges2323 bronze badges 1

• 1 The space is the descendant selector. You are looking for an element [data-wish-url='/product'] inside an element [data-wish-name='product'] inside an element .wishlist-icon. If you want to select an element based on multiple selectors, you have to write them together. – Felix Kling Commented Sep 14, 2013 at 10:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Just remove the space between the selector.

$(".wishlist-icon[data-wish-name='product'][data-wish-url='/product']").hide();

Js Fiddle Demo