javascript - 如何使用 ondrop 事件访问类元素内的段落元素并将其删除？

Question

我有两个 div 框:.box001、.box002。

我想删除每个 drop 上带有 name1、name2、name3 的 p 元素。

当我将 id="1"的 .box002 拖放到另一个 div - id="10"的 .box001 拖动元素删除 ondrop 时背景颜色也变为无，同样 id="2"的 box002 到 box001 id="20"和第三个框类似。

我怎样才能做到这一点？

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>

Answer 1

我添加的代码位于 Javascript 容器的底部。希望这会有所帮助。

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
  
  /* Added */
  var pParagraph = ev.target.firstElementChild;
  console.log(pParagraph);
  ev.target.removeChild(pParagraph);
}

.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>