title: How can I make an image invisible when I drag and drop an element on it?
body: <p>I am trying to replace an image with another image when something is dragged and dropped on it. This is my current code.</p>
  <p>What should I add in the <code>document.addEventListener(&quot;drop&quot;, function(event)</code> to make the image invisible, and replace it with another image when the dragtarget is dropped on it?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* Events fired on the drag target */
  document.addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("Text", event.target.id);
    document.getElementById("demo").innerHTML = "Started to drag the p element.";
    event.target.style.opacity = "0.4";
  });
  
  document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
  });
  
  document.addEventListener("dragend", function(event) {
    document.getElementById("demo").innerHTML = "Finished dragging the p element.";
    event.target.style.opacity = "1";
  });
  
  document.addEventListener("dragenter", function(event) {
    if (event.target.className == "droptarget") {
      event.target.style.border = "5px dotted red";
    }
  });
  
  document.addEventListener("dragover", function(event) {
    event.preventDefault();
  });
  
  document.addEventListener("dragleave", function(event) {
    if (event.target.className == "droptarget") {
      event.target.style.border = "";
    }
  });
  
  document.addEventListener("drop", function(event) {
    event.preventDefault();
    if (event.target.className == "droptarget") {
      document.getElementById("demo").style.color = "";
      document.getElementByClass("droptarget").style.visibility = 'hidden';
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dragtarget {
    float: left;
    width: 100px;
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
  }
  
  .droptarget {
    float: left;
    width: auto;
    height: auto;
    margin: 15px;
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Drag and drop the p element on the image:&lt;/p&gt;
  
  &lt;div class="dragtarget"&gt;
    &lt;p draggable="true" id="dragtarget"&gt;Drag me!&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="droptarget"&gt;&lt;img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/49ec1464-d899-400a-b608-c48c76b500d2/ddlby97-f31bd202-49ef-4391-995a-e08a03e9a0f8.jpg/v1/fit/w_150,h_150,q_70,strp/baby_yoda_by_patrickbrown_ddlby97-150.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTAwIiwicGF0aCI6IlwvZlwvNDllYzE0NjQtZDg5OS00MDBhLWI2MDgtYzQ4Yzc2YjUwMGQyXC9kZGxieTk3LWYzMWJkMjAyLTQ5ZWYtNDM5MS05OTVhLWUwOGEwM2U5YTBmOC5qcGciLCJ3aWR0aCI6Ijw9OTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.F2FTXKUhT4EtaU-LcDHGU-e6TKzIADYXo3UIRgrv8jU"&gt;&lt;/div&gt;
  
  &lt;p id="demo"&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>