要删除的节点不是此节点JavaScript的孩子

Question

其他堆栈答案未能解决我的问题，因为我认为出现这种情况的原因不同。我的JS代码：

const addButton = document.querySelector('.addButton')
var input = document.querySelector('.input')
const draggable_list = document.getElementById('draggable-list'); //draggable_list is a ul

let itemBox;
let items;
const array = [];
const listItems = [];
let dragStartIndex;

class item {
    constructor(itemName) {
        this.createDiv(itemName);
    }

    createDiv(itemName) {    
        let removeButton = document.createElement('button');
        removeButton.innerHTML = 'REMOVE';
        removeButton.classList.add('removeButton');

        draggable_list.appendChild(items);
        items.appendChild(removeButton);

        removeButton.addEventListener('click', () => this.remove(items);
    }
    async remove(item, value) {
        draggable_list.removeChild(item) 
    }
}

async function check() {
    if (input.value != '') {
        array.push(input.value)
        listItems.push(input.value) 
        array.forEach((numbers,index) => {
            items = document.createElement('li')
            items.setAttribute('data-index', index)
            items.innerHTML = `
            <div class="draggable" draggable="true">
                <p class="phone-number">${numbers}</p>
                <i class="fas fa-grip-lines"></i>
            </div>`;

        } )
        new item(input.value)
        input.value = ''
}

addButton.addEventListener('click', check)

当第一次调用 remove() 时，它成功删除了 last li 元素。但是当再次调用它时，我收到以下错误：

Uncaught (in promise) DOMException: Node.removeChild: The node to be removed is not a child of this node

Answer 1

这个适合您的工作...

const addButton = document.querySelector('.addButton');
const input = document.querySelector('.input');
const draggable_list = document.getElementById('draggable-list');
//draggable_list is a ul

let itemBox;
let items;
const array = [];
const listItems = [];
let dragStartIndex;

class Item {
  constructor(itemName) {
    this.createDiv(itemName);
  }
  createDiv(itemName) {
    let input = document.createElement('input');
    input.value = itemName;

    let removeButton = document.createElement('button');
    removeButton.innerHTML = 'REMOVE'
    removeButton.classList.add('removeButton');

    draggable_list.appendChild(items);
    items.appendChild(removeButton);

    removeButton.addEventListener('click', (event) => {

      if (event && event.target.parentElement) {
        // this.remove(items));
        this.remove(event.target.parentElement);
      }
    });
  }
  remove(item, value) {
    draggable_list.removeChild(item);
  }
}

function check() {
  if (input.value != '') {
    array.push(input.value);
    listItems.push(input.value);
    array.forEach((numbers, index) => {
      items = document.createElement('li');
      items.setAttribute('data-index', index)
      items.innerHTML = `
            <div class="draggable" draggable="true">
                <p class="phone-number">${numbers}</p>
                <i class="fas fa-grip-lines"></i>
            </div>`;

    });
    new Item(input.value);
    input.value = '';
  }
}

addButton.addEventListener('click', check)

<button class="addButton">+</button>
<input type="text" class="input" />

<ul id="draggable-list">

</ul>

Answer 2

与其复制和粘贴一些您不理解的复杂代码，不如尝试自己编写。尝试并专注于您需要的东西，而不是其他东西。

这是一种方法：

const [inp,btn,ul]=["input","button","ul"].map(e=>document.querySelector(e));

btn.onclick=function(){
 ul.innerHTML+=`<li><p>${inp.value}</p><button>delete</button></li>`;
 inp.value="";
}

ul.onclick=function(ev){
  if (ev.target.tagName==="BUTTON")
    ul.removeChild(ev.target.closest("li"));
}

<input type="text">
<button>add</button>
<ul></ul>