エリアAにある要素をエリアBにドラッグ&ドロップした時、エリアAから要素が消えてエリアBに移動するのは何故？

前提・実現したいこと

以下のようにドラッグする要素を移動させる際、appendChildメソッドを利用しているのですが、
元々エリアAにあったドラッグ要素が消える理由がわかりません。

エリアA[ ドラッグする要素 ] エリアB [ ]

ドラッグ(appendChild)

エリアA[ ] エリアB[ ドラッグする要素 ]

ソースコードの /* ドロップ領域に落とされたら */ というコメントが書かれた部分に
appendChildが書いてあります。

ご回答いただけると嬉しいです。
よろしくお願いいたします。

該当のソースコード

html5
1<div class="spots" id="spot1">
2  <div id="target" draggable="true">
3
4  </div>
5</div>
6<div class="spots" id="spot2">
7
8</div>

javascript
1function DragAndDrop() {
2 /*
3  * 本来はクラスでまとめて処理
4  */
5  let target = document.getElementById("target"); //ドラッグ要素
6  let spot1 = document.getElementById("spot1"); //ドロップ先1
7  let spot2 = document.getElementById("spot2"); //ドロップ先2
8
9  /* ドラッグ中/ドラッグ終了なら */
10  target.addEventListener("drag", (e) => {
11    e.target.style.display = "none";
12  });
13  target.addEventListener("dragend", (e) => {
14    e.target.style.display = "block";
15    spot1.style.backgroundColor = "rgba(0, 0, 0, 0)";
16    spot2.style.backgroundColor = "rgba(0, 0, 0, 0)";
17  });
18
19  /* ドロップ領域に入ったら */
20  spot1.addEventListener("dragenter", (e) => {
21    spot1.style.backgroundColor = "rgba(185, 43, 39, 0.5)";
22  });
23  spot2.addEventListener("dragenter", (e) => {
24    spot2.style.backgroundColor = "rgba(255, 252, 0, 0.5)";
25  });
26
27  /* ドロップ領域を離れたら */
28  spot1.addEventListener("dragleave", (e) => {
29    spot1.style.backgroundColor = "rgba(76, 117, 163, 0.5)";
30  });
31  spot2.addEventListener("dragleave", (e) => {
32    spot2.style.backgroundColor = "rgba(76, 117, 163, 0.5)";
33  });
34
35  /* ドロップ領域に入っている間 */
36  spot1.addEventListener("dragover", (e) => {
37    e.preventDefault();
38  });
39  spot2.addEventListener("dragover", (e) => {
40    e.preventDefault();
41
42  });
43
44  /* ドロップ領域に落とされたら */
45  spot1.addEventListener("drop", (e) => {
46    e.target.appendChild(target); //ドラッグ先に要素を投入
47    spot1.style.backgroundColor = "rgba(0, 0, 0, 0)";
48    spot2.style.backgroundColor = "rgba(0, 0, 0, 0)";
49    target.style.backgroundColor = "#b92b27";
50  });
51  spot2.addEventListener("drop", (e) => {
52    e.target.appendChild(target);　//ドラッグ先に要素を投入
53    spot1.style.backgroundColor = "rgba(0, 0, 0, 0)";
54    spot2.style.backgroundColor = "rgba(0, 0, 0, 0)";
55    target.style.backgroundColor = "#FFFC00";
56  });
57
58}