要移除的節點不是此節點JavaScript的子節點

其他堆疊答案未能解決我的問題，因為我認為這是由于不同的原因而發生的。我的 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  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

uj5u.com熱心網友回復：

這對你有用嗎...

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 class="addButton"> </button>
<input type="text" class="input" />

<ul id="draggable-list">

</ul>

uj5u.com熱心網友回復：

與其復制和粘貼一些您不理解的復雜代碼，不如嘗試自己撰寫。嘗試并專注于您需要的東西，而不是其他東西。

這是一種方法：

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>

標籤：javascript dom removechild

上一篇：使用CDate()的查詢過濾器產生不一致的結果

下一篇：正確匹配每個影像檔案的名稱[PHP]