jQuery value selector

Question

I have:

<button class="Delete" value="1">Delete</button>
<button class="Delete" value="2">Delete</button>
<button class="Delete" value="3">Delete</button>

Given variable X that contains a value (in this case either a 1, a 2 or a 3), then how do I hide the button corresponding to the value in X?

I want to say something like:

$('button').val(x).hide();

Meaning: "The button whose value is x, hide".

Answer 1

$('button[value="' + x + '"]').hide();

Answer 2

You can write your own custom selector (I just felt someone should mention it). Could look like:

(function($) {
    $.extend($.expr[':'], {
         val: function(elem, i, attr) {
             return elem.value === attr[3];
         }
    });
}(jQuery));

$('button:val(2)').hide();

Answer 3

You'd do that inside of the actual selector:

$('button[value="foo"]').hide();

Answer 4

This would require concatenating x into an xpath, but i can't think of another way right now.

$(button[value='1']).hide();

EDIT: removed @, apparently deprecated, much like myself :)