jquery - Best way to hide a button with .visible-desktop class?

Question

I'm trying to hide a button using jQuery ( using $.fn.hide()) ,but the jQuery method does not work, because the elements I want to hide contains the Bootstrap .visible-desktop/.hidden-desktop class (using any Bootstrap's responsive class, really). It happens due to .visible-desktop is using the display attribute with !important. I want to display a button version for mobile/tablet different than desktop version but I would want to use my two buttons as a unique identity. A simpler version of my issue would be:

in HTML file:

<button class="my-button my-button-for-tablet-mobile hidden-desktop"></button>
<button class="my-button my-button-for-desktop visible-desktop"></button>

in jQuery file (Desired, but it does not work):

//A line of this type should hide the two buttons.
$(".my-button").hide();

I don't know what is the better way to implement this...

EDIT:

There is a JsFiddle about this question:

http://jsfiddle.net/bDLnN/

Answer 1

一种方法是只使用attr()来覆盖它。

以下应该有效：

$('.my-button').attr('style', 'display: none !important')

Answer 2

您可以使用object.setProperty (propertyName, propertyValue, priority);接收优先级参数的函数。

$(".my-button").each(function () {
    this.style.setProperty("display", "none", "important");
});

参考