title: Spawning objects in javascript and deleting them
body: <p>I'm making a Javascript mini-game, theres a bad guy and the player, when the player is clicked on, he fires a bullet, the bullet goes to the bad guy, and upon hitting him it disappears, hurting him.</p>
  
  <p>I managed to get to spawning the bullet, and I can make it move too, the problem is when trying to spawn more than 1 bullet (Shooting twice), that way every bullet will need a different ID, this is what iv'e tried to do:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  
  var hp = 4;
  var num = 1;
  
  function fire()
  {
  
      document.getElementById("bodie").innerHTML += "&lt;img style='position:absolute;left:0px;top:0px;' id='bullet"+num+"' src='../project1/images/bullet.png'/&gt;";
      bulletpos();
      num++;
  
  }
  function fireanim()
  {
      document.getElementById("player").src = "../project1/images/goodguyfire.png"
      setTimeout(function still(){document.getElementById("player").src = "../project1/images/goodguystill.png"},200);
  }
  
  
  function bulletpos()
  {
  
      var bulletX = parseInt(document.getElementById("player").style.left) - 20;
      var bulletY = parseInt(document.getElementById("player").style.top) + 35;
      document.getElementById("bullet").style.left = bulletX;
      document.getElementById("bullet").style.top = bulletY;
      setInterval(function(){bulletmove()}, 25);
  
  }
  
  function bulletmove()
  {
      var bulletX = parseInt(document.getElementById("bullet").style.left);
      document.getElementById("bullet").style.left = bulletX - 10;
  }
  
  function hit()
  {
  
      document.getElementById("hpbar").src = "../project1/images/hp"+ hp +".png";
  
      if(hp &lt;= 0)
      {
          die();
      }
  
      if(hp != 0)
      {
          hp--;
      }
  
  
  }
  
  function die()
  {
      var foeX = parseInt(document.getElementById("foe").style.left);
      document.getElementById("foe").style.left = foeX - 33; 
      document.getElementById("foe").src = "../project1/images/deadguy.png";
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body id="bodie"&gt;
  &lt;img id="player"  onClick="fire(),fireanim()" style="position:absolute;top:100px;left:600px;" src="../project1/images/goodguystill.png"/&gt;
  &lt;img id="foe"  style="position:absolute;top:100px;left:150px;" src="../project1/images/badguy.png"/&gt;
  &lt;img id="hpbar" style="position:absolute;top:80px;left:120px;" src="../project1/images/hp5.png"/&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see i tried to spawn a bullet with same ID, but different number near the ID, that way i can control every single bullet, and delete them after they hit the bad guy.
  But it still doesn't let me do it, don't know why.</p>
  
  <p>If there is a better way to do this ill happily accept it, feel free to correct my code or absolutely change it.</p>
  
  <p>Thanks.</p>