how to hide <div> in html or prevent an <input type='text'> from being printed

mhas01
mhas01 used Ask the Experts™
on
Hi experts.

As the title of the question states, I need to understand by examples:

how to hide a <div> element in html

and also I need to prevent an <input type='text'> from being printed (maybe putting it inside another div element)

DYNAMICALLY, and using Javascript maybe leveraging css styles and JQuery would be preferable.

Thanks in advance
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jason C. LevineDon't talk to me.

Commented:
<div style="display: none"></div>

That will hide the div and contents from being displayed.  To assign it via javascript or jquery you just use whatever event you want to trigger it and assign the preferred style to the preferred object.
<div style="display: none"></div> will disappear the div tag
<div style="visible: false"></div> will hide the content of the div tag
you can call these using javascript
Use document.getElementById('id')

http://www.w3schools.com/htmldom/dom_nodes_access.asp
http://www.w3schools.com/jsref/dom_obj_node.asp
Information Systems Manager
Top Expert 2012
Commented:
in jQuery, dynamically setting:
<style>
@media print {
  .dontPrint {display:none}
}
</style>
<input type="text" id="myTextInput"/>
<div id="myDiv"></div>
<script>
function makeInputNotPrint(){
  $("#myTextInput").addClass("dontPrint");
}
function makeInputPrint(){
  $("#myTextInput").removeClass("dontPrint");
}
function hideDiv(){
  $("#myDiv").hide();
}
function showDiv(){
  $("#myDiv").show();
}
</script>

Open in new window

Ovid BurkeConsultant Instructor
Commented:
Assuming that your div element has a class or id you can set this in your css file, the same can also be done for your form fields.

@media print {
	div.classname { /* hides divs with the class value 'classname' */
		display: none;
	}
	div#idname { /* hides divs with the id value 'classname' */
		display: none;
	}
	input[type=text] { /* hides every instance of a text field */
		display: none;
	}
	.noprint { /* hides any element with the class value 'noprint' */
		display: none;
	}
}

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial