: How to make it obvious that an option is unavailable, and can be deleted? Here is the question I have asked on StackOverflow that somehow did not get the response I hoped for. I am trying

@Odierno310

The fact that something isn't there at all is a great indication that it is not present!

If you'd like to still display the things that were 'chosen but missing' in each result element I suggest not doing it as the same elements in the same section with the only difference being styling.

Rather have it be clear to the user that this section shows what things a hotel has, and this section shows the things you searched for that were not included. Potentially having the 'chosen but missing' elements be a simple comma-delimited list of strike-through text that is presented in a way of being in the result but not appearing as if it is a description of the location.

Thus a result is a visual element and a hotel is a visual element within the result and data describing each is separated as such.

Example:

Vote Up Vote Down

@Moriarity648

I suggest a bunch of indicators working in tandem:


'Greyed Out' - give the unavailable buttons some transparency, (or the appearance of transparency with lighter colours). This will make sure it is noticeably different from the other buttons, at the very least sparking curiosity as to why it's different.
'Strike-THROUGH!!!!' - "Like seriously guys look, I put a line through it." That usually means something negative.
On tap or hover (you can simply use :hover for this, it works for tap consistently as well as far as I know - you just can't use it on a link without a workaround) offer the option to delete, and a proper explanation.


Quick Mockup:

No hover:



Hover/Tap Whole Button:



Hover/Tap Question Mark:



See a JSFiddle Mockup of (div) buttons with hover help and delete buttons.

Vote Up Vote Down

@Frith110

A good looking cross can be achieved by replacing your regular 'x' with a multiplication x which looks like this:


×


More info: Unicode Character 'MULTIPLICATION SIGN'

It works with the common web fonts: Arial, Verdana, Georgia etc.

Vote Up Vote Down

@Cofer715

I think the logic is flawed. I choose some amenities and as a result I expect to see ONLY hotels that combine these amenities. You should inform the user that there is NO hotels that have all the amenities and maybe let them see the results with missing amenities by clicking another button.
The red crossed button works well in my opinion. If there are users that don't understand it, it's their problem.

Vote Up Vote Down

@Heady304

A more elegant solution would be to grey out the button, set it's state to disabled and use a disabled cursor to clearly show the state. I've thrown together a quick codepen to demonstrate this.

Vote Up Vote Down