p元素不删除ondrop

Question

我有两个div框：.box001，.box002。

当我将id =“ 1”的.box002拖放到另一个div-将id =“ 10”的.box001拖放到元素时，背景色也将消失，同样将id =“ 2”的box002拖放到box001 id =“ 20”和第三个方框相似

我要删除每个放置上名称为name1，name2，name3的p元素。

如何实现？

function allowDrop(ev)
{
  ev.preventDefault();
}
function drag(ev)
{
  ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  alert(data);
  var el = document.getElementById(data);

  el.parentNode.removeChild(el);    // deleting drag item

  ev.target.style.backgroundColor = 'initial'; //[value indicate which box elemenet] bgcoclor none
  document.getElementsByClassName(ev.target.className).innerHTML = '';  // which box p  should blank 
}

.box001 {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 10%;
  background-color: #42e0fd;
  font: "Courier New", Courier, monospace;
  font: 70px;
  ;
  color: #001a00;
  font-size: xx-small;
  font-weight: 900;
  text-align: center;
}

.box002 {
  float: left;
  width: 50px;
  height: 50px;
}

<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
  <p id="11"> name1</p>
</div>
<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="20">
  <p id="12">name1</p>
</div>
<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="30">
  <p id="13">name1</p>
</div>


<div class="box002" draggable="true" ondragstart="drag(event)" id="1">
  <img src="https://picsum.photos/200/300" draggable="true" id="1" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
  <img src="https://picsum.photos/200/300" draggable="true" id="2" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
  <img src="https://picsum.photos/200/300" draggable="true" id="3" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
</div>
    </div>

Answer 1

  

尝试：   

function allowDrop(ev)
{
  ev.preventDefault();
}
function drag(ev)
{
  ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  alert(data);
  var el = document.getElementById("1"+data);

  el.remove(el);    // deleting drag item

  ev.target.style.backgroundColor = 'initial'; //[value indicate which box elemenet] bgcoclor none
  document.getElementsByClassName(ev.target.className).innerHTML = '';  // which box p  should blank 
}

.box001 {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 10%;
  background-color: #42e0fd;
  font: "Courier New", Courier, monospace;
  font: 70px;
  ;
  color: #001a00;
  font-size: xx-small;
  font-weight: 900;
  text-align: center;
}

.box002 {
  float: left;
  width: 50px;
  height: 50px;
}

<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
  <p id="11"> name1</p>
</div>
<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="20">
  <p id="12">name1</p>
</div>
<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="30">
  <p id="13">name1</p>
</div>


<div class="box002" draggable="true" ondragstart="drag(event)" id="1">
  <img src="https://picsum.photos/200/300" draggable="true" id="1" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
  <img src="https://picsum.photos/200/300" draggable="true" id="2" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
  <img src="https://picsum.photos/200/300" draggable="true" id="3" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
</div>
    </div>