Hide empty fields rows from html array jquery

Question

I want to hide all those rows whose fields are empty using jquery.

Here is my Code DEMO: http://jsfiddle.net/7k3y3/19/

HTML:

<div class="container">

    <div id="row_3">
        <input type="text" id="field_3" name="field[]" value="PHP"/>
    </div>  

    <div id="row_5">
        <input type="text" id="field_5" name="field[]" value="Javascript"/>
    </div>  


    <div id="row_8">
        <input type="text" id="field_8" name="field[]" value=""/>
    </div>  


    <div id="row_10">
        <input type="text" id="field_10" name="field[]" value="C++"/>
    </div>  


    <div id="row_12">
        <input type="text" id="field_12" name="field[]" value=""/>
    </div>      

</div>

<a href="javascript:void(0);" class="save">SAVE</a>

JS :

$(".save").click(function ()
    {
        var fieldArr = $( "input[name='field[]']" );

        for(i=1; i<=fieldArr.length;i++)
        {

            if(fieldArr[i]=='')
            {
                fieldArr[i].hide();    
            }

        }



    });

Use class instead of name in your HTML code.

Rahul Desai
– Rahul Desai

2014-01-08 05:52:25 +00:00
Commented Jan 8, 2014 at 5:52 — Rahul Desai
– Rahul Desai, Commented Jan 8, 2014 at 5:52

codingrose · Accepted Answer · 2014-01-08 05:53:24Z

2

Write:

$(".save").click(function (){
    $("input[name='field[]']").each(function(){
        if($(this).val() == ""){
            $(this).hide();
        }
    });
});

Updated fiddle here.

answered Jan 8, 2014 at 5:53

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xdazz · Accepted Answer · 2014-01-08 05:53:28Z

1

$(".save").click(function (){
    $('.container :input').each(function() {
        if ($(this).val().length == 0) {
            $(this).hide();
        }
    });                    
});

The demo.

answered Jan 8, 2014 at 5:53

xdazz

161k38 gold badges255 silver badges278 bronze badges

Comments

Chirag Swadia · Accepted Answer · 2014-01-08 06:03:11Z

1

This will work. Have tested it on fiddle.

$(".save").click(function(){
    $( "input[name='field[]" ).each(function(){ 
        if($(this).val() == ''){
            $(this).hide();
        }
    });              
});

answered Jan 8, 2014 at 6:03

Chirag Swadia

1,1172 gold badges9 silver badges24 bronze badges

3 Comments

BetaCoder Over a year ago

EXACTLY COPIED FROM PREVIOUS ANSWER, First Posted 10mins before !

Ram Over a year ago

@BetaCoder He has tested it :)

Chirag Swadia Over a year ago

@BetaCoder By the time I had run the code on fiddle and submitted here, Exactly similar answer was already posted :) Not my fault.

Ram · Accepted Answer · 2014-01-08 06:08:48Z

1

You are comparing a DOM Element object with an empty string which is not true, of course, you should read the .value properties instead. Also you are calling jQuery .hide() method on a DOM element object, you should either use jQuery .eq(i) method which returns a jQuery wrapped element or manipulate the style property.

for (var i = 0; i < fieldArr.length; i++) {
    if (fieldArr[i].value == '') {
        fieldArr[i].parentNode.style.display = 'none';
    }
}

Since you are using jQuery you can also use the .filter() method, which acts like a loop but only returns the elements that meet the condition, in this case values with length of 0:

$('.container > div').filter(function() {
    return !$("input[name='field[]']", this).val().length; 
}).hide();

http://jsfiddle.net/GLeZc/

edited Jan 8, 2014 at 6:08

answered Jan 8, 2014 at 5:55

Ram

145k16 gold badges174 silver badges201 bronze badges

Collectives™ on Stack Overflow

Hide empty fields rows from html array jquery

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related