title: How to append and remove images in a div (javascript and html)
body: <p>I'm trying to make a function (in javascript) that removes an image I attached to a div in html, I am having trouble getting the image I want to remove. The overall idea is to be able dynamically attach and remove images w/o having to use multiple divs. 
  Here is the function to append the image</p>
  
  <pre><code>function appendImage(imageSource, Id){
      var img = document.createElement("IMG");
      img.src = imageSource;
      document.getElementById(Id).appendChild(img);
  }
  </code></pre>
  
  <p>The reason I create img in the function (instead of outside) is so that I can attach multiple new ones to the div, if I don't it just replaces the image
  Here is what I'm trying to for the removing the image</p>
  
  <pre><code>function removeImage(imageSource,Id){
      document.getElementById(Id).removeChild(img);
  }
  </code></pre>
  
  <p>I cannot access img in the removeImage because it isn't in the scope. So is there a way to pass img into removeImage w/o making it global or maybe another completely different way not using append or remove?</p>
  
  <p>I don't know if you need it but all i have in my html file is</p>
  
  <pre><code>&lt;div id="image"&gt;&lt;/div&gt;
  </code></pre>