javascript - How to replace a image with another one during html5 drag and drop on a occupied div -

Hello I'm trying to create a javascript web app using HTML drag and drop. This is a game for children where they need to draw a number from 1 to 6 (all the images in a container inside a container), with a fixed number of items in the background. So if the div has a background image of 6 candies, then they need to draw six numbers on it.

I did fine and get my code to work on dragging and dropping me, but I want to: / P>

- When a child leaves a number on a div And then it turns out that he was wrong, so he could just pull the right number and the last one would disappear. But if you try with my current code that the new dragging number is the dislike and the div remains with the old number.

This is my code:

  // javascript document window .mover = window.mover || {}; Window.monster = (function () {"strictly use"; function lovers () {} Mover.prototype.allowDrop = function (e) {e.preventDefault ();}; Mover.prototype.drag = function ) {E.dataTransfer.setData ("text", e.target.id);}; Mower.propitipodp = function (e) {e.preventDefault (); var data = e.dataTransfer.getData ("text"); E.target.appendChild (document.getElementById (data));} return mover;} ()); Var moviendo = new proposer ();   
 Any help would be appreciated, ty!   
 
 
  append stall ()  does not remove the old element; New is probably there, but you can not see it Try something like this before adding a new element:  
  e.target.removeChild (e.target.childNodes [0])