I want to hide fields if its value is empty and the src image is also in HTML using Javascript

how to hide fields in html if fields are empty as well as src image. using java script. please suggest

<div id="pagewrapper" >
    <div class="row" >
        <div class="column-half" style="width:500px">
            <div class="containerdiv" >

                <form:label path="file4Desc" type="text" value="" maxlength="50">
                </form:label>
                <form:input path="file4Desc" value="${agreement.file4Desc}" 
                    style="width:300px"/>
                <font color="red"><form:errors path="file4Desc" /></font>           
            </div>
        </div>
        <div class="column-half" style="width:13%">         
            <div class="containerdiv">
                <form:label path="filename3" type="text" value="" maxlength="50">
                </form:label>
                <a href="${pageContext.request.contextPath}/customer/viewDownload3/${agreement.agreementId}.htm">
                    <img src="${pageContext.request.contextPath}/resources/images/download3.gif" 
                                border="0"
                                title="Download this document"/>
                </a>

            </div>
        </div>
    </div>
</div>
0
source share
2 answers

Try the following: you can use .filter()and hide the input if the value is empty.

$(function(){
 $('.containerdiv input').filter(function(){
   return $(this).val().trim()=='';
 }).hide();
});

Filter API document ()

EDIT . Since the OP wants to hide both the input and the image, if the input value is empty, see the updated solution below

$(function(){
     $('.containerdiv input').each(function(){
       if($(this).val().trim()=='')
       {
          //hide parent div and next div having image
          var $parentDiv = $(this).closest('.column-half');
          $parentDiv.next('.column-half').hide();
          $parentDiv.hide();
        }
     });
  });
+4
source

Try the following:

$(function(){
 $('.containerdiv input').each(function(){
   if($(this).val().trim()=='')
     $(this).hide();
 })
});
+1
source

All Articles