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

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  draggable="true">
                <p >${numbers}</p>
                <i ></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

CodePudding user response：

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  draggable="true">
                <p >${numbers}</p>
                <i ></i>
            </div>`;

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

addButton.addEventListener('click', check)

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

<ul id="draggable-list">

</ul>

CodePudding user response：

Instead of copying and pasting some convoluted code you don't understand you should try and write it yourself. Try and focus on what you require and nothing else.

Here is one way if doing it:

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>