The node to be removed is not a child of this node JavaScript

Question

Other stack answers have failed to fix my problem because I think this occurs for different reasons. My JS code:

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)

When remove() is called for the first time, it successfully removes the last li element. But when it is called again, I get the following error:

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

Answer 1

Does this work for you...

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>