Otras respuestas de la pila no han podido solucionar mi problema porque creo que esto ocurre por diferentes razones. Mi código 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) Cuando se llama a remove() por primera vez, elimina con éxito el último elemento li . Pero cuando se vuelve a llamar, aparece el siguiente error:
Uncaught (in promise) DOMException: Node.removeChild: The node to be removed is not a child of this nodeEsto funciona para tí...
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>En lugar de copiar y pegar un código intrincado que no entiendes, deberías intentar escribirlo tú mismo. Prueba y concéntrate en lo que necesitas y nada más.
Aquí hay una forma de hacerlo:
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>