在 JavaScript 中使用 Node.remove() 删除 li 不起作用

Question

我目前正在尝试通过单击删除按钮来删除 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 之外的其他 li 都将被删除。我尝试使用 console.log 进行调试，但 targetToDo 及其parentNode 没问题。我可以看到 li 代表 targetToDo，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>

---

所见即所得 => 所见即所得

Answer 2

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

您的代码发生的情况如下。

• 当您单击x按钮时，它将调用该按钮的单击事件以及li的单击事件。
• 因此，首先它会调用 x & 的点击事件。从 deleteButton.addEventListener 中，它将删除您的 li。
• 然后它将调用 li 的点击事件，并根据 li.addEventListener 中的代码将 li 移动到其他 ul >。
• Event< 的 stopPropagation() 方法/a> 接口防止当前事件在捕获和冒泡阶段进一步传播。
• 因此，如果您在 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>