title: hide text box and image using javascript
body: <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;style&gt;
    .thumb {
      height: 150px;
      width: 150px;
      border: 1px solid #000;
      margin: 10px 5px 0 0;
  
      }
      ul.img-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  
  ul.img-list li {
    display: inline-block;
    height: 150px;
    margin: 0 1em 1em 0;
    position: relative;
    width: 150px;
  }
  
  
  span.text-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  span.text-content {
    background: rgba(0,0,0,0.5);
    color: white;
    cursor: pointer;
    display: table;
    height: 152px;
    left: 0px;
  
    position: absolute;
    top: 10px;
    width: 152px;
    opacity: 0;
  }
  
  ul.img-list li:hover span.text-content {
    opacity: 1;
  }
   &lt;/style&gt;
  
  &lt;input type="file" id="files" name="files[]" multiple /&gt;
  &lt;output id="list"&gt;&lt;/output&gt;
  
  &lt;script&gt;
  function hide(images)
  {
  images.style.width="0px";
  images.style.visibility="hidden";
  var te=document.getElementById("un");
  //document.getElementById("t1").style.visibility="hidden";
  te.style.visibility="hidden";
  }
    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
  
     // Loop through the FileList and render image files as thumbnails.
     for (var i = 0, f; f = files[i]; i++) {
  
       // Only process image files.
       if (!f.type.match('image.*')) {
         continue;
       }
  
       var reader = new FileReader();
  
       // Closure to capture the file information.
       reader.onload = (function(theFile) {
         return function(e) {
            // Render thumbnail.
            var span = document.createElement('span');
            span.innerHTML = ['&lt;span id="s" style="display:inline-block; width: 300px;" &gt;&lt;ul id="un" class="img-list"&gt;&lt;li onclick="hide(this)"&gt;&lt;img id="img" class="thumb" src="', e.target.result,
                          '" title=" click this image for deselect" /&gt;&lt;span class="text-content"&gt;&lt;span&gt;Click here to Deselect&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;&lt;input type="text" id="t1" &gt;&lt;/ul&gt;&lt;/span&gt;'].join('');
  
            document.getElementById('list').insertBefore(span, null);
      };
        })(f);
  
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
      }
    }
  
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
  
   &lt;/script&gt;
   &lt;script type="text/javascript"&gt;
   function printing()
   {
      document.getElementById("files").style.visibility="hidden";
      document.getElementById("p").style.visibility="hidden";
      window.print();
      document.getElementById("files").style.visibility="visible";
      document.getElementById("p").style.visibility="visible";
      }
   &lt;/script&gt;
   &lt;input type="button" id="p" value="print" onclick="printing();"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the above code I used to upload image in Jsp page and I am trying to hide the uploaded image and text box . It works first time I click the image but when i click second image.that was hide but text box are not hide only the first text box is hide.what can i do hide both image and text box when i click the particular image. 
  sorry for my poor English</p>