在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之外的其他lis正在被删除。我尝试过使用console.log进行调试，但targetToDo及其parentNode还可以。我可以看到li代表targetToDo，ul代表它的parentNode。我该怎么解决这个问题？提前谢谢。

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>