Hiding button in JQuery using .prop(hidden: true)

Question

I am trying to figure out how to hide a button with JQuery using the .prop(hidden: true) method. For some reason, in Chrome when I set this value and view the html, the button has a hidden element, but the button still shows up as visible on the page.

Any ideas?

Answer 1

What you described is actually correct if you happen to use jquery alongside bootstrap4.

just do the following: $element.prop('hidden', true);

If no bootstrap 4 available it is still works for modern browser.

Answer 2

A button does'nt have a hidden property ?

$('button').hide();

or

$('button').toggle(true);  //shows button
$('button').toggle(false); //hides button

Answer 3

If you want to use prop, then

$("#my_button").prop("style").display="none"

I would go w/o jquery. (back to the basic)

document.getElementById("mybutton").style.display = "none";

Answer 4

prop() is a getter function: http://api.jquery.com/prop/ I suggest using hide: http://api.jquery.com/hide/

Answer 5

Your syntax is incorrect, but there's no "hidden" property anyway. You probably want:

$('#your_button').hide();

or possibly

$('#your_button').addClass('hidden');

if you've got a "hidden" class in your CSS.

The incorrect part of your syntax is that the parameters to your function call are expressed incorrectly. Setting a property should look like:

$("#your_button").prop("name", "value");

Answer 6

jQuery.prop is intended for HTML attributes only, things defined on the DOM node. CSS styles aren't applicable things to set with prop, and hidden just doesn't exist, whereas href or class is applicable. Instead you must use $(el).css('display', 'none') or $(el).hide().