如何在JS中新建的每一个列表项上都附加“删除按钮”？
在JavaScript中为每个新创建的列表项附加一个“删除按钮”，可以通过以下步骤实现：
基础概念
- DOM操作：文档对象模型（DOM）允许JavaScript动态地访问和更新HTML文档的内容、结构和样式。
- 事件监听：为元素添加事件监听器，以便在特定事件（如点击）发生时执行代码。
实现步骤
- 创建列表项：使用JavaScript动态创建列表项（
<li>）。 - 创建删除按钮：为每个列表项创建一个删除按钮（
<button>）。 - 附加删除按钮：将删除按钮附加到列表项中。
- 添加事件监听器：为删除按钮添加点击事件监听器，以便在点击时删除对应的列表项。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态添加删除按钮</title>
</head>
<body>
<ul id="list">
<!-- 初始列表项 -->
<li>Item 1 <button class="delete-btn">删除</button></li>
</ul>
<button id="add-btn">添加列表项</button>
<script>
// 获取列表和添加按钮
const list = document.getElementById('list');
const addButton = document.getElementById('add-btn');
// 添加列表项的函数
function addItem() {
const newItem = document.createElement('li');
newItem.textContent = `Item ${list.children.length + 1}`;
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.classList.add('delete-btn');
// 为删除按钮添加点击事件监听器
deleteButton.addEventListener('click', function() {
list.removeChild(newItem);
});
// 将删除按钮附加到列表项中
newItem.appendChild(deleteButton);
// 将列表项附加到列表中
list.appendChild(newItem);
}
// 为添加按钮添加点击事件监听器
addButton.addEventListener('click', addItem);
</script>
</body>
</html>应用场景
- 动态列表管理：在需要动态添加和删除列表项的应用中，如待办事项列表、购物车等。
- 用户交互增强：通过添加删除按钮，增强用户对列表项的控制和操作体验。
可能遇到的问题及解决方法
- 事件监听器未生效：确保事件监听器正确绑定到元素上，检查是否有其他脚本干扰。
- 列表项未正确删除：确保删除按钮的事件监听器中正确引用了要删除的列表项。
- 性能问题：如果列表项非常多，可以考虑使用虚拟DOM或优化事件监听器的绑定方式。
参考链接
通过以上步骤和示例代码，你可以在JavaScript中为每个新创建的列表项附加一个“删除按钮”，并实现相应的功能。
相关·内容
1回答
使用JS DOM的购物清单练习。我的完整代码： https://codepen.io/lil _ A/pen/BaQKvqZ?编辑器=0110 我必须为每个新创建的列表项添加一个新的“删除”按钮。我设法做到了这一点，但它只将我创建的按钮附加到最后一个列表项，而不是其他新添加的项。怎么做才能让每个列表项</e
浏览 40提问于2021-03-02得票数 0
回答已采纳
我的HTML列表中有一些按钮，这些按钮本应删除该列表项，但实际上却删除了列表底部的项。我已尝试获取列表的唯一ID，但它不起作用。列表中的每一项都有一个唯一的ID，比如"item1“，"item2”...。
我还需要列表的索引来删除列表对象中的实际项，否则它们都会卡在那里，这是不好的<
浏览 0提问于2018-09-14得票数 0
在开箱即用的sharepoint在线站点上，我可以在“新建”按钮下的文档库中找到最常见的办公文档，如word、excel、powerpoint等等。但是，一旦我添加了一个额外的内容类型到库中。我可以找到创建的内容类型，例如图片，但只有word文档和其他办公室类型，如excel和pp都不见了。删除图片内容后，再键入所有类型的office文件a。这是为什么，以及我如<
浏览 4提问于2017-07-09得票数 0
我通常对项目本身使用控件@Edit.Toolbar(内容、操作：“编辑、新建、删除、实例列表”)。然后，用户可以通过单击任何项目上的按钮来编辑整个列表。从逻辑上讲，他们单击ListContent中的实例列表按钮就更有意义了。
在早期版本的2SXC中，用户可以悬停在DNN黑白铅笔图标上，点击“编辑列表”，这很有意义。此控件在新版本的2SXC中不可用，因此他们必须通过
浏览 5提问于2017-02-18得票数 0
回答已采纳
1回答
我有下面的Sencha应用程序嵌套列表，它由工具栏按钮.组成。每当我点击任何列表项时，我都需要删除下面列表中显示"Tab Bar“的按钮。如您所见，按钮仍然在那里，我需要移除.。Sencha视图文件夹Ext.define('firstApp.view.Main', {
extend :
浏览 2提问于2013-02-25得票数 1
回答已采纳
我正在开发一个包含大量数据输入表单的WPF应用程序。我已经将这些窗体中的每一个都公开为单独的用户控件。每个表单都包含用户输入并保存的字段，如Customer Name、Company Name。
保存操作是使用工具栏执行的，工具栏由“保存”、“删除”和“关闭”选项组成。我已经将工具栏创建到一个单独的UserControl中，并将其放在容器视图/外壳视图中
浏览 3提问于2014-07-11得票数 0
1回答
我正在构建一个JavaScript待办事项列表，该函数将输入值推入数组，并将值和删除按钮附加到list元素中。我已经实现了一个删除函数，在尝试和错误之后，在这个站点上研究了其他类似的演示，似乎初始表达式"var lastid = 0“和增量表达式"lastid=+1”都允许单击特定的按钮来删除特定的列表项。否则，如果没有该表达式，单击特定列表项
浏览 0提问于2018-11-06得票数 0
回答已采纳
我使用select2‘tag:true’将新值添加到现有列表框中。但是无法获得新的附加值，因为它在HttpPost上不向控制器返回值。如何在控制器中获得新的增值？列表框代码：脚本部分：
$(documen
浏览 0提问于2018-11-05得票数 0
它们都类似地工作，使用某种类型的标记来表示数据，还有一些标记可以将纯JS嵌入到模板中，包括循环、if/ with等等。我正在尝试一种方法来创建一个具有完整javascript支持的模板引擎，但是在克隆之前保留任何附加到模板上的事件。
设想一个场景，其中模板是用于项目列表的。每个项目都包含按钮，这些按钮对该项执行特定任务(即编辑、删除、重命名、复制，您可以
浏览 1提问于2015-01-25得票数 0
回答已采纳
我正在做一个待办事项列表，在添加一个新的列表项时，我会动态添加li和按钮标记。按钮是一个x，它应该删除列表项。我尝试过几种方法，但无法弄清楚如何为每个x按钮创建一个eventListener，并在单击时删除相应的列表项。
renderTodos函数是创建所有动态添加内容的地方。我为每个按钮设置了一个数据索引，我试图在每个按钮中访问每个按钮
浏览 3提问于2014-10-31得票数 1
回答已采纳
试图模拟被分成三个大小相等的div的联系我们页面。尝试使用JS设置click set以显示相应的div并隐藏任何打开的div。由于某些原因，代码无法工作。任何帮助都是非常感谢的。我将删除我的css，因为它只是HTML/JS不工作。
我已经尝试为每个列表项编写单独的函数，但在单击不同的div时，它没有关闭前一个(打开的) div。HTML可能有问题，但我太
浏览 0提问于2019-01-30得票数 0
2回答
你能告诉我如何在angular js ..Actually中更新列表项吗?我正在使用add按钮添加项目，.it是动态生成的行，.there是行上的更新和删除按钮，在全屏..please上检查.when你按下delete按钮，它会删除正在运行的行.I也需要使用更新按钮来更新行。当我单击更新按钮时，我在输入字段.B
浏览 2提问于2015-08-25得票数 0
1回答
我正在我的视图上显示一个igGrid，它在每一行上都启用了编辑和删除。请指导我如何在igGrid中</e
浏览 0提问于2014-02-06得票数 3
回答已采纳
3回答
现在，我正在使用jquery构建功能，这将允许用户删除任务。
问题是，当我点击删除按钮在一个做的应用程序，要求我确认删除的每一个列表项目。当我单击“取消删除”对一个，它取消对所有他们。换句话说，我正在接收所有HTML .的重复行为。我相信这是因为所有的待办事项都是从同一个html.erb模板中生成的，在模板中我给每个元素它的ID以便我可以引用它，但是由于每个ID是
浏览 5提问于2014-07-09得票数 0
当出现此问题时，正在尝试运行的测试将记录以下内容: OpenQA.Selenium.WebDriverException: WebDriver对远程服务器的请求在60秒后超时。期待着更深层次的东西。()以下是故障发生时事件查看器的详细信息</Data>
<Data>fd4f5070-4d84-11e5-891b-0
浏览 2提问于2015-08-28得票数 1
所以我仍然在学习javascript，对于我的第一个列表项目，我已经可以将数组添加到HTML页面，但它不是将最后一个元素添加到每一行，而是将整个数组添加到每一行。如何将其更改为只添加最后一个元素？link rel="stylesheet" type="text/css" href="todo.css">
<script type="text/javascript" src="todo.js
浏览 35提问于2021-03-25得票数 0
回答已采纳
所以基本上，当用户输入一项活动并按下'+‘按钮时，它会与一个’delete‘(字体很棒的回收站)图标一起被添加到列表中，这样用户就可以删除该活动。我已经使用.append()函数实现了这一点。但是，当用户添加第一个项目时，会有一个删除按钮。但是，对于每个其他列表，删除按钮的数量会成倍增加。(例如，当用户添加第二个项目时，该项目有两个删除按钮，而当他们添加第三个项目时，该项
浏览 0提问于2019-04-25得票数 2
2回答
"></script><script src="https属性出现在input模型中。但在list item 1中不再可用。实际上，在我将list item 1值放到input中之后，它就变成了undefin
浏览 3提问于2016-01-27得票数 3
回答已采纳
对于我的palm pre应用，我有一个动态生成的列表(从SQLite中拉入数据，加载到模型中，绑定)。这可以很好地工作，但现在我需要为每个动态生成的项添加一个开/关切换。在模板中包含切换开关可以工作，但是我不能正确地分配小部件的功能。我正在尝试将小部件绑定到场景中，但到目前为止还没有成功。
那么，有没有人知道如何在动态列表中绑定小部件的webOS教程(或示例)？
浏览 5提问于2009-09-04得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
