title: Why this code adding empty img tag?
body: <p>This code allows the user to enter a search term, and then presents a series of images from Flickr that have that tag. This works as intended but I can't understand why this generates so many img tags. </p>
  
  <pre><code>var main = function () {
      "use strict";
  
      var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=catss&amp;lang=en-us&amp;format=json&amp;jsoncallback=?";
  
  
      var $searchInput = $("&lt;input&gt;");
  
      $("header").append($searchInput);
  
  
      $.getJSON(url, function (flickrResponse) {
  
          flickrResponse.items.forEach(function (photo) {
  
              var $img = $("&lt;img&gt;").hide();
  
              $img.attr("src", photo.media.m);
  
  
              $searchInput.on("keypress", function (event) {
                  if (event.keyCode === 13) {
                      $img.remove();
                      $img.removeAttr('src');
  
                      var $tag = photo.tags.split(" ");
  
                      $tag.forEach(function (tag) {
                          if (tag === $searchInput.val()) {
                              $img.attr("src", photo.media.m);
                          }
                      });
                      $("main .photos").append($img);
                      $img.fadeIn();
                  }
              });
              $("main .photos").append($img);
              $img.fadeIn();
  
          });   
      }).fail(function (jqxhr, textStatus, error) {
          var err = textStatus + ', ' + error;
          alert("Request Failed: " + err);
      });
  };
  
  $(document).ready(main);
  </code></pre>
  
  <p>The above code results in: </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
   &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
      &lt;body&gt;
        &lt;header&gt;&lt;input&gt;&lt;/header&gt;
        &lt;main&gt;
           &lt;div class="photos"&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""   src="http://farm9.staticflickr.com/8299/7875996296_734b9c599d_m.jpg"&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
               &lt;img style=""&gt;
          &lt;/div&gt;
        &lt;/main&gt;
        &lt;footer&gt; &lt;/footer&gt;
        &lt;script src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;
        &lt;script src="javascripts/app.js"&gt;
       &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Why it is adding so many img tags?</p>