在 JavaScript 中使用 Node.remove() 删除 li 无效

Question

我目前正在尝试通过单击 deleteButton 来删除 li。 这是我的完整 JS 代码。

const form = document.querySelector('#form');
const savedList = document.getElementById('savedList');
const doneList = document.getElementById('doneList');

form.addEventListener('submit', (e) => {
  const li = document.createElement('li');
  li.innerText = document.getElementById('input').value;
  li.id = li.innerText;
  li.isDone = false;
  li.isDone ? doneList.append(li) : savedList.append(li);

  const deleteButton = document.createElement('button');
  deleteButton.innerText = 'x';
  deleteButton.id = 'deleteButton';
  li.append(deleteButton);

  li.addEventListener('click', () => {
    li.isDone ? (li.isDone = false) : (li.isDone = true);
    li.isDone ? doneList.append(li) : savedList.append(li);
  });

  deleteButton.addEventListener('click', function(event) {
    const targetToDo = event.currentTarget.parentNode;
    console.log(targetToDo.parentNode);
    targetToDo.parentNode.remove(targetToDo);
    targetToDo.remove();
  });
  e.preventDefault();
});

<form id="form">
  <input id="input" type="text" />
  <button type="submit">Submit</button>
</form>

<ul id="savedList"></ul>
<ul id="doneList"></ul>

但是，正在删除除 targetToDo 之外的其他列表。我试过使用 console.log 进行调试，但 targetToDo 及其 parentNode 没问题。我可以看到 targetToDo 的 li 和它的 parentNode 的 ul。我怎样才能解决这个问题？提前致谢。

Answer 1

试试这个...

deleteButton.addEventListener('click', function(event) {
    const targetToDo = event.currentTarget.parentNode;
    console.log(targetToDo.parentNode);
    setTimeout(() => li.remove(), 0); // The li that will be removed also has the delete button as child and we are inside the event handler of that child. A setTimeout() works here
  });

---

插图

希望按照基本设置以及 OP 中的代码进行说明更接近 OP 的需求。

const form = document.querySelector('#form');
const savedList = document.querySelector("#saved-list");
const doneList = document.querySelector("#done-list");

form.addEventListener('submit', (e) => {
  const li = document.createElement('li');
  li.innerText = document.getElementById('input').value;
  li.id = li.innerText;
  li.isDone = false;
  li.isDone ? doneList.append(li) : savedList.append(li); //<--- This condition check is insignificant as we are setting it to false in the previous statement

  const deleteButton = document.createElement('button');
  deleteButton.innerText = 'x';
  deleteButton.id = 'deleteButton';
  li.append(deleteButton);

  li.addEventListener('click', () => {
    li.isDone ? (li.isDone = false) : (li.isDone = true);
    li.isDone ? doneList.append(li) : savedList.append(li);
  });

  deleteButton.addEventListener('click', function(event) {
    const targetToDo = event.currentTarget.parentNode;
    console.log(targetToDo.parentNode);
    // targetToDo.parentNode.remove(targetToDo);
    // targetToDo.parentNode.remove();
    // targetToDo.remove();
    setTimeout(() => li.remove(), 0);
  });
  e.preventDefault();
});

<form id="form">
  <input id="input" type="text" />
  <button type="submit">Submit</button>
</form>

<ul id="saved-list"></ul>
<ul id="done-list"></ul>

---

WYSIWYG => WHAT YOU SHOW IS WHAT YOU GET

Answer 2

您需要在 deleteButton.addEventListener 的末尾使用 event.stopPropagation()。它会解决你的问题。

你的代码发生了什么，如下所示。

• 当您单击 x 按钮时，它将调用 button 的单击事件以及 li 的单击事件。
• 因此，首先它将调用 x 的点击事件，然后从 deleteButton.addEventListener 中删除您的 li。
• 然后它将调用 li 的点击事件，根据 li.addEventListener 的代码，它将 li 移动到其他 ul。
• Event 接口的 stopPropagation() 方法阻止了当前事件在捕获和冒泡阶段的进一步传播。
• 因此，如果您在 deleteButton.addEventListener 中使用 event.stopPropagation()，那么它将阻止进一步调用 li 单击事件，并且将无法再次添加 li其他 ul.

试试下面的代码。

const form = document.querySelector('#form');
const savedList = document.querySelector("#saved-list");
const doneList = document.querySelector("#done-list");

form.addEventListener('submit', (e) => {
  const li = document.createElement('li');
  li.innerText = document.getElementById('input').value;
  li.id = li.innerText;
  li.isDone = false;
  li.isDone ? doneList.append(li) : savedList.append(li);

  const deleteButton = document.createElement('button');
  deleteButton.innerText = 'x';
  deleteButton.id = 'deleteButton';
  li.append(deleteButton);

  li.addEventListener('click', () => {
    li.isDone ? (li.isDone = false) : (li.isDone = true);
    li.isDone ? doneList.append(li) : savedList.append(li);
  });

  deleteButton.addEventListener('click', function(event) {
    const targetToDo = event.currentTarget.parentNode;
    console.log(targetToDo.parentNode);
    // targetToDo.parentNode.remove(targetToDo);
    targetToDo.remove();
    
    // Add below line.
    event.stopPropagation();
  });
  e.preventDefault();
});

<form id="form">
  <input id="input" type="text" />
  <button type="submit">Submit</button>
</form>

<ul id="saved-list"></ul>
<ul id="done-list"></ul>