^ no, it does not answer the question at all
I have a total of 4 input fields and 4 spans. Each span displays the value from the corresponding input field.
My goal is to hide empty spans. Simply removing the string from the input box leaves the span blank, but I want it to be completely hidden. Currently, when you leave Field 3 empty, it creates an empty space between Field 2 and Field 4. I would like Field 4 to move up into the place of Field 3 instead.
Is there any way to achieve this?
<tr>
<td><h2>Field1</h2>
<input type="text" value="0" class="field1" type="number" min="0" max="20" maxlength="2" size="5"></td>
<td><h2>Field 2</h2>
<input type="text" value="101" class="field2" maxlength="4" size="5"></td>
<td><h2>Field3 - hide span when im empty</h2>
<input type="text" value="0" class="field3" type="number" min="0" max="20" maxlength="2" size="5"></td>
<td><h2>Field 4</h2>
<input type="text" value="101" class="field4" maxlength="4" size="5"></td>
</td>
</tr>
<br><br>
Field1: <span class="genaug"><span class="field1"></span>%</span><br />
Field2: <span class="genpd"><span class="field2">0</span></span><br />
<b><span class="genaug"><span class="field3"></span></span><br /></b>
Field4: <span class="genpd"><span class="field4">0</span></span>
$("input.field1").on("keyup",function () {
$("span.field1").html($(this).val());
});
$("input.field2").on("keyup",function () {
$("span.field2").html($(this).val());
});
$("input.field3").on("keyup",function () {
$("span.field3").html($(this).val());
});
$("input.field4").on("keyup",function () {
$("span.field4").html($(this).val());
});
if ("input.Field3".length) span.style.display = "none";
JSFiddle updated with craig1231 solution http://jsfiddle.net/jRwDg/7/