Hide span with jquery

Question

^ no, it does not answer the question at all

I have got 4 input fields and 4 span. Each span shows the value from corresponding input field.

What I want to achieve, is hiding empty span. Removing string from inputbox makes the span empty, but it is not what I want. I want to not display it. At this moment when you leave field 3 empty, it will just leave a blank hole between field 2 and field 4. I simply want the field 4 to hop into the place of fields 3.

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/

possible duplicate of [hide spans using jquery](http://stackoverflow.com/questions/8320989/hide-spans-using-jquery) — NoWar, Mar 31 '14 at 18:49

score 2 · Accepted Answer · answered Mar 31 '14 at 18:53

2

$("input.field1").on("keyup",function () {
    var vl = $(this).val();
    if (vl == "") {
        $("span.field1").hide();
    }
    else {
        $("span.field1").show().html(vl);
    }
});

answered Mar 31 '14 at 18:53

craig1231

3,769
4
31
34

does not help either :( – Andy Andy Mar 31 '14 at 19:01
– craig1231 Mar 31 '14 at 19:04
Even after deleting the second span, blank hole remains. This drives me crazy – Andy Andy Mar 31 '14 at 19:04

score 0 · Answer 2 · answered Mar 31 '14 at 18:51

0

Try like,

if($("input.field3").val()=="") $("span.field3").css("display", "none");

If you don't want to consider the space then use like,

$.trim($("input.field3").val())

answered Mar 31 '14 at 18:51

Soundar

2,569
1
16
24

score 0 · Answer 3 · answered Mar 31 '14 at 18:51

0

You could check the length of the field on key up.

$("input.field3").on("keyup",function () {
    if ($(this).length==0)
        $("span.field3").hide()
    else
        $("span.field3").show().html($(this).val());
});

answered Mar 31 '14 at 18:51

user694844

1,188
11
16

it doesnt help. blank hole is still here – Andy Andy Mar 31 '14 at 18:59

Hide span with jquery

3 Answers3