Javascript 删除已删除列表项的选项

我使用了以下HTML和Javascript将列表项从一个div拖放到另一个div

Html:

stackblitz链接是

我需要的是，在我使用class

buildArea

将列表项拖放到div之后，可以删除列表项，即我需要为每个拖放的项目生成唯一的删除按钮，单击该按钮，当前列表必须删除

需要完成从给定的中删除绿色区域中已删除列表项的选项。 我还需要只使用纯javascript，而jquery需要被忽略

---

经过长时间的搜索，我找不到任何解决方案，因此请帮助我实现删除已删除列表项的愿望输出。

尝试以下方法：

绿色区域中的拖放列表：


我是列表{{li.name}


到这里来


{{li.innerHTML}

X

TS:

列表：数组=[
{name:1}，
{name:2}，
{姓名：3}，
{名称：4}，
{姓名：5}，
]
elId：数字；
DragedList:数组=[
]
允许速度（ev）{
ev.preventDefault（）；
}
阻力（ev，i）{
this.elId=i；
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
//ev.target.appendChild（document.getElementById（data.cloneNode（true））；
this.DraggedList.push（document.getElementById（数据））；
}
删除项目（i）{
如果（i>-1）{
这个.DragedList.拼接（i，1）；
}
}

尝试以下方法：

绿色区域中的拖放列表：


我是列表{{li.name}


到这里来


{{li.innerHTML}

X

TS:

列表：数组=[
{name:1}，
{name:2}，
{姓名：3}，
{名称：4}，
{姓名：5}，
]
elId：数字；
DragedList:数组=[
]
允许速度（ev）{
ev.preventDefault（）；
}
阻力（ev，i）{
this.elId=i；
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
//ev.target.appendChild（document.getElementById（data.cloneNode（true））；
this.DraggedList.push（document.getElementById（数据））；
}
删除项目（i）{
如果（i>-1）{
这个.DragedList.拼接（i，1）；
}
}

如果我从

ev.target.appendChild（document.getElementById（data.cloneNode（true））行中删除
.cloneNode（true）
，您的解决方案将起作用在我给出的代码中，为什么有这么多的变通方法？但是我需要做的是在删除之后，我必须做一个删除选项来删除绿色区域中被删除的列表项。。这与可拖动项无关..我这样做是因为它可以动态地为每个元素生成唯一的id。无需为每一项指定。如果你想按下按钮，你可以使用than。没关系，但我只需要删除我想要的删除列表。。而且也没有必要删除可拖动的项目..明白了。。是否要为每个拖动的项目（在绿色框中可用）放置删除按钮？是，但在拖动列表中不需要任何删除按钮，只有在将其放入绿色列表后，才能执行删除操作。。情况是，用户可能错误地删除了列表，因此我需要删除该选项。如果我从
ev.target.appendChild（document.getElementById（data.cloneNode（true））行中删除
.cloneNode（true）
，您的解决方案将有效在我给出的代码中，为什么有这么多的变通方法？但是我需要做的是在删除之后，我必须做一个删除选项来删除绿色区域中被删除的列表项。。这与可拖动项无关..我这样做是因为它可以动态地为每个元素生成唯一的id。无需为每一项指定。如果你想按下按钮，你可以使用than。没关系，但我只需要删除我想要的删除列表。。而且也没有必要删除可拖动的项目..明白了。。是否要为每个拖动的项目（在绿色框中可用）放置删除按钮？是，但在拖动列表中不需要任何删除按钮，只有在将其放入绿色列表后，才能执行删除操作。。情况是，用户可能错误地删除了列表，所以要删除它，我需要该选项。
<div class="listArea">
   <h4> Drag and Drop list in Green Area: </h4>
   <ul class="unstyle">
      <li id="drag1" draggable="true" (dragstart)="drag($event)">
          i am list 1
      </li>
      <li id="drag2" draggable="true" (dragstart)="drag($event)">
          i am list 2 
      </li>
      <li id="drag3" draggable="true" (dragstart)="drag($event)">
          i am list 3
      </li>
      <li id="drag4" draggable="true" (dragstart)="drag($event)">
          i am list 4
      </li>
   </ul>
</div>
<div class="buildArea" id="div1" (drop)="drop($event)" (dragover)="allowDrop($event)">
   <h4> Drop Here </h4> 
</div>

  allowDrop(ev) {
    ev.preventDefault();
  }

  drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data).cloneNode(true));
  }

  <div class="listArea">
    <h4> Drag and Drop list in Green Area: </h4>
    <ul class="unstyle">
        <li *ngFor="let li of List; let i = index" id="drag{{i}}" draggable="true" (dragstart)="drag($event, i) ">
            i am list {{li.name}}
        </li>
    </ul>
</div>


    <div class="buildArea " id="div1 " (drop)="drop($event) " (dragover)="allowDrop($event) ">
        <h4> Drop Here </h4>

        <ul class="unstyle">
            <li *ngFor="let li of DraggedList; let i = index" id="dragged{{i}}">
                <p>{{li.innerHTML}}</p>
                <button (click)="deleteItem(i)" type="button"> X</button>

            </li>
        </ul>
    </div>

List: Array<any> = [
    { name: 1 },
    { name: 2 },
    { name: 3 },
    { name: 4 },
    { name: 5 },
  ]
  elId: number;

  DraggedList: Array<any> = [

  ]

  allowDrop(ev) {
    ev.preventDefault();
  }

  drag(ev, i) {
    this.elId = i;
    ev.dataTransfer.setData("text", ev.target.id);
  }

  drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    // ev.target.appendChild(document.getElementById(data).cloneNode(true));
    this.DraggedList.push(document.getElementById(data));
  }

  deleteItem(i) {
    if (i > -1) {
      this.DraggedList.splice(i, 1);
    }
  }