gpt4 book ai didi

javascript - 删除待办事项列表项

转载 作者:行者123 更新时间:2023-12-01 00:34:46 25 4
gpt4 key购买 nike

我试图通过单击项目上的删除按钮来删除待办事项列表项目。我不确定具体如何实现这一点。

添加项目的代码有效,但删除按钮功能无效。

document.getElementById('button').addEventListener('click',function addTodo(){
var value = document.getElementById('input').value;
const item = `<li>
<div class="item">
<div class="complete">
<button id="complete" class="todo">Complete</button>
</div>

<p class="text">${value}</p>

<div class="remove">
<button id="remove" class="todo">Remove</button>
</div>
</div>
</li>`;
const position = "beforeend";

list.insertAdjacentHTML(position,item);
});

document.getElementById('remove').addEventListener('click',function removeTodo(){
var item = this.closest( 'li' );
item.remove();
});
<div class="container">
<header>
<input type="text" id="input" placeholder="Add an item"/>
<button id="button" type="button">Add item </button>
</header>
<div id="list"></div>
</div>

当我检查控制台时,收到“TypeError: document.getElementById(...) is null app.js:24:10”

最佳答案

问题是您的代码试图将事件附加到不存在的元素。将新项目添加到列表后,您必须附加事件。

document.getElementById('button').addEventListener('click',function addTodo(){
var value = document.getElementById('input').value;
const item = `<li>
<div class="item">
<div class="complete">
<button id="complete" class="todo">Complete</button>
</div>

<p class="text">${value}</p>

<div class="remove">
<button id="remove" class="todo">Remove</button>
</div>
</div>
</li>`;
const position = "beforeend";

list.insertAdjacentHTML(position,item);

document.getElementById('remove').addEventListener('click',function removeTodo(){
var item = this.closest( 'li' );
item.remove();
});
});
<div class="container">
<header>
<input type="text" id="input" placeholder="Add an item"/>
<button id="button" type="button">Add item </button>
</header>
<div id="list">
</div>
</div>

好的。这解决了最初的问题,但现在产生了一个新问题:单击删除按钮后,仅删除添加的第一个项目。

为什么?

首先,代码创建具有相同 id 的新按钮。在 HTML 中,id 属性是元素的唯一标识符,因此它们不能重复。

解决方案

创建新项目时添加随机 ID。

document.getElementById('button').addEventListener('click',function addTodo(){
var value = document.getElementById('input').value;
var randomId = Math.random();
const item = `<li>
<div class="item">
<div class="complete">
<button id="complete" class="todo">Complete</button>
</div>

<p class="text">${value}</p>

<div class="remove">
<button id="` + randomId +`" class="todo">Remove</button>
</div>
</div>
</li>`;
const position = "beforeend";

list.insertAdjacentHTML(position,item);

document.getElementById(randomId).addEventListener('click',function removeTodo(){
var item = this.closest( 'li' );
item.remove();
});
});
<div class="container">
<header>
<input type="text" id="input" placeholder="Add an item"/>
<button id="button" type="button">Add item </button>
</header>
<div id="list">
</div>
</div>

关于javascript - 删除待办事项列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58225589/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com