-1

If CSS is disabled, but JavaScript is not, how can I hide an element (a file input field, in my case)? None of the following will work, although they all work when CSS is enabled:

element.style.display = 'none';
element.style.visibility = 'hidden';
element.hidden = 'hidden';
element.hidden = true;
element.setAttribute('hidden','hidden');
element.setAttribute('hidden',true);

The only thing that can hide when CSS is disabled, as far as I know, is a hidden input field. Maybe that could lead to a solution. Any help is appreciated, thanks!

7
  • 2
    "If CSS is disabled" --- what if HTML is disabled? Is there any real reason for such a strange requirement?
    – zerkms
    Oct 29, 2012 at 1:14
  • 1
    Not a very practical reason, kind of like a challenge.
    – Sophivorus
    Oct 29, 2012 at 1:16
  • I hope it's truth and it won't go to production ;-)
    – zerkms
    Oct 29, 2012 at 1:18
  • 2
    -1 because I don't feel that this question is actually useful. CSS is the language for styling HTML, and visibility control is part of styling.
    – zzzzBov
    Oct 29, 2012 at 1:28
  • 1
    Is this for 508 compliance?
    – goodbuoy
    Oct 9, 2013 at 7:17

3 Answers 3

1

Because it's an input element, you could change its type to hidden:

element.type = "hidden";

But be aware that this won't work in some IE versions. In that case, I think you'd need to create a new element, give it the hidden type, and swap them.

DEMO: http://jsfiddle.net/gLvRz/

0

You can just delete element from DOM:

element.parentNode.removeChild(element);

If you want to restore it later, you can store its HTML code (or a reference to element itself) in a variable. In case of form field, it may be required to store its value too and then restore the value after restoring element itself.

Also, consider using hidden HTML5-attribute, though its support by browsers may be not too wide yet (and the attribute itself may be removed from HTML standard).

4
  • I've seen that. If you store only the contents - you won't know where actually to restore it.
    – zerkms
    Oct 29, 2012 at 1:21
  • @MaratTanalin—to restore the element, a reference can be kept and used later. E.g. var elementCache = {}; elementCache[element.id] = element;. Now the element can be removed from the DOM and restored later. You can also store a reference to its parent if necessary, e.g. elementCache[element.id + '_parent'] = element.parenNode;.
    – RobG
    Oct 29, 2012 at 1:22
  • @RobG: parent is also not enough as well. <div>foo<span>removeme</span>bar</div>
    – zerkms
    Oct 29, 2012 at 1:24
  • The OP can put in an empty span as a placeholder, it just depends on what they are trying to do.
    – RobG
    Oct 29, 2012 at 1:25
0

I suppose you could abuse the AREA element to hide something inside it.

//hide element
var hiddenContainer = document.createElement("AREA");
element.parentNode.insertBefore(hiddenContainer, element);
hiddenContainer.appendChild(element);

//show element
hiddenContainer.parentNode.insertBefore(element, hiddenContainer);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.