创建多个列表项的onClick删除功能
是一种常见的前端开发需求，可以通过以下步骤实现：
- HTML结构：创建一个包含多个列表项的HTML列表，每个列表项都包含一个删除按钮，例如：<ul id="list"> <li>列表项 1 <button class="delete-btn">删除</button></li> <li>列表项 2 <button class="delete-btn">删除</button></li> <li>列表项 3 <button class="delete-btn">删除</button></li> </ul>
- JavaScript事件处理：使用JavaScript为每个删除按钮添加点击事件处理程序，以便在点击时删除相应的列表项。可以使用事件委托的方式，将事件处理程序绑定到列表的父元素上，以提高性能和代码简洁度。示例代码如下：var list = document.getElementById("list"); list.addEventListener("click", function(event) { if (event.target.classList.contains("delete-btn")) { var listItem = event.target.parentNode; listItem.parentNode.removeChild(listItem); } });
- CSS样式：为删除按钮添加样式，使其看起来像一个按钮，并且可以根据需要进行自定义样式。
这样，当用户点击任何一个删除按钮时，相应的列表项将被删除。
这种功能在许多场景中都有应用，例如待办事项列表、评论列表等。腾讯云提供了丰富的云计算产品，其中与前端开发相关的产品包括云服务器、云存储、云函数等。您可以根据具体需求选择适合的产品。更多关于腾讯云产品的信息，请访问腾讯云官方网站：腾讯云。
相关·内容
4回答
如何删除带有JS创建按钮的JS创建的LI？
javascript、html、dom
我正在JavaScript中创建一个TODO应用程序。如何理解如何链接两个已创建的JavaScript项并将它们从DOM中删除？
TL;DR: --我一直被困的地方--是在列表项创建之后导航DOM。我尝试使用一个setAttribute来创建带有"id“标记的元素，但是我仍然可以知道如何在LI上迭代以找到哪个按钮被按下了。
代码：
<div class="entry-field">
<label class="task-input" for="task-input">Task:&
浏览 6提问于2020-02-16得票数 0
回答已采纳
3回答
使用纯javascript删除元素
javascript、html
我试图删除ul (列表项)中的一个元素，就像这样，只使用javascript。由于我是动态生成html，所以我在下面创建时尝试设置onclick。然而，当我试图点击(见小提琴)元素没有被删除。有关职能如下：
var appendHTML = function (el) {
var list = document.getElementById("events");
for (var i = 0; i < filteredDates.length; i++) {
var listItem = filteredDates[i].name;
浏览 0提问于2015-11-18得票数 0
回答已采纳
4回答
Javascript -删除列表项
javascript
如何通过单击列表项正确删除列表项？
我一直在使用下面的代码行来删除一个项，但是它删除了整个列表本身：
var list = document.getElementById("shoppinglist");
list.onclick = function() { list.parentNode.removeChild(list);}
我一直在网上搜索如何做到这一点，同样的代码不断出现，我不知道如何解决这个问题。我假设生成的列表项目是“购物列表”的一个子项目。
我对Javascript非常陌生，我知道这是一个菜鸟的错误，但是我真的很感激任何帮助。谢谢。
<!docty
浏览 0提问于2016-09-24得票数 1
回答已采纳
3回答
如何创建一个按钮来删除它所在的li元素
javascript
我正在尝试创建一个普通的javascript To-do应用程序。我不想使用jquery，因为我不知道它是如何工作的;)
我需要一个输入，在那里我可以填写一个任务，点击一个按钮来添加它，还有一个按钮来清除输入字段。
当我添加任务时，应该有一个带有"X“的按钮来删除特定的列表项。
我不知道如何在li元素中创建按钮，该元素在单击时删除该li元素。
const menu = document.getElementById("ul");
function callThisOne() {
var Task = document.getElementById("a
浏览 1提问于2020-12-18得票数 1
回答已采纳
1回答
为什么在单击add按钮JavaScript时文本值会重复
javascript、html
我正在执行一个基本的待办事项列表项目，其中文本输入的值必须添加到一个无序列表中，其中包含3个硬编码列表项的所有属性。
到目前为止，我已经将输入字段的值添加到列表中，但之后的每个任务都会重复。我将在下面添加代码。我对编程相当陌生，所以请原谅我的代码lol。提前谢谢。
<body>
<div class="todo-area">
<div class="add-area">
<h1 id="list-name">To-Do List</h1>
浏览 7提问于2022-01-30得票数 0
回答已采纳
3回答
删除列表项时会关闭强大的弹出窗口
javascript、jquery、html、magnific-popup
我有一个神奇的弹出窗口，我有一个按钮，动态添加列表项。在每个列表项中都有一个删除列表项的按钮。然而，当列表项被移除时，它也会关闭弹出窗口。当我再次打开弹出窗口时，列表项就消失了。这是一个bug，还是我做错了什么？非常感谢您的帮助，谢谢！
codepen示例：
HTML：
<a href="#dialog" class="open-popup-link">Show popup</a>
<!-- Popup -->
<div id="dialog" class="white-popup mfp-hi
浏览 3提问于2013-05-17得票数 1
回答已采纳
1回答
单击按钮时，使用nextSiblingElement标记使列表项向下移动
javascript、html
当我点击“向下”按钮时，我想让我的列表条目下降，但是它们没有触发，控制台也没有给我任何错误，不知道出了什么问题。我所有的其他按钮都工作得很完美，其他所有的按钮都按其应有的方式工作。我检查了我的代码的方式，不明白为什么我的nextElementSibling代码不能正常工作。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
<link rel="stylesheet" href="css/style.
浏览 2提问于2020-02-27得票数 0
回答已采纳
5回答
按回车时刷新待办事项列表
javascript、jquery
提交待办事项列表项后，页面将刷新。我正在使用e.stopPropagation()来防止默认页面重新加载(没有帮助)。
这是我的JavaScript。有关我的完整代码，请参见我的。
$(function() {
$('.button').click(function(e) {
e.stopPropagation();
let toAdd = $('input[name=listItem]').val();
// Inserts li as first child of ul
$('ul').prepend(&
浏览 0提问于2018-04-04得票数 0
回答已采纳
1回答
在Javascript中点击按钮后，如何删除单个项目？
javascript
我正在做一个待办事项列表项目，当点击垃圾按钮时，所有的列表项都会被删除，并且不会添加任何新的待办事项。 我已经查看了其他帖子，但无法真正找到我的项目的答案，请帮助！ let input = document.querySelector('#todo')
let btn = document.querySelector('#btn');
let list = document.querySelector('#list');
btn.addEventListener('click', (
浏览 15提问于2021-04-30得票数 1
回答已采纳
2回答
来自addEventListeners e.traget的值
javascript
是否可以将值存储为EventListener中的id？当我点击项目时，我需要从这个列表中得到一个ID。
这就是我尝试过的：
<ul class="list">
<li class="item-list" id="1"></li>
<li class="item-list" id="2"></li>
<li class="item-list" id="3"></li
浏览 7提问于2022-04-17得票数 1
回答已采纳
2回答
previousSibling在控制台中显示了两种不同的东西
javascript、html
我正试图用一个按钮把安莉移到一个ul上。我正在使用控制台跟踪某些变量，以查看我的代码是否正常工作。我在看控制台的时候发现了一些很奇怪的东西。
当我单击列表中某个项目的向上箭头时，变量itemBefore在控制台中显示"#text“(对象)。此外，列表项的移动并不像它应该做的那样。它不会动的。
现在，我再次单击同一列表项上的按钮，控制台反而显示安莉，列表项确实向上移动。它对不是第一项的每个列表项都这样做(因为这将在if语句中执行另一个代码子集)。
我想知道为什么完全相同的onclick做了两件不同的事情，以及如何阻止它第一次失败。
<ul id="incomplete-ta
浏览 3提问于2015-10-02得票数 0
回答已采纳
3回答
来自Javascript循环的列表中的按钮返回列表
javascript、jquery、loops
我得到了这个javascript循环，它生成一个包含大约50个列表项的无序列表。现在我想在每个列表项中放置一个按钮，用于在数据库中存储内容。想想转发吧。
我想出了一种方法，将按钮和列表项中的内容放在循环中的隐藏输入中，但这似乎是一个糟糕的快捷方式。如下所示：
html += "<form action=\"add.php\" method=\"post\"><input type=\"hidden\" value=\"" + listitem + "\" name=\"item\&
浏览 3提问于2011-11-30得票数 0
3回答
jQuery单击appenTo后丢失的事件
javascript、jquery、html、css
我使用appendTo在两个列表之间移动列表项，按一下按钮。按钮驻留在每个li元素中。每个li有两个按钮，每次只有一个是可见的，这取决于li当前驻留的列表。
以下是功能：
// 'this' is the first list
// Click Handler for remove and add buttons
$(this.selector + ', ' + settings.target + ' li button').click(function(e) {
var button = $(e.target);
var li
浏览 5提问于2014-07-24得票数 2
回答已采纳
1回答
嵌套在li中的安莉和button的onClick检测
javascript、reactjs
所以我试着在有一个delete按钮的同时实现直通功能。单击li文本将删除该项，单击del按钮将删除该项。 从功能上讲，它是有效的。问题是，当我删除一个itme时，比如"2"，它会将划线样式应用到它下面的列表项。我猜这是因为"onClick“被检测到两次--在列表项和按钮内部(因为按钮从技术上讲是嵌套在列表项中的)。当我按下DEL按钮2的时候，检测到列表项3的onClick，应用了划线样式。纠正这个问题的最好方法是什么？ 我使用应用程序组件和ListItem组件编写的代码： import React, { useState } from "react";
浏览 33提问于2021-08-19得票数 0
1回答
在javascript中创建删除按钮以删除购物列表项
javascript、dom
我试着自己做这件事，甚至阅读别人对这个练习的解决方案，但我就是不明白。我需要有人给我的建议，如何使删除按钮功能。这就是我到目前为止所做的
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var buttonDlt = document.querySelectorAll("delete");
functio
浏览 0提问于2019-12-28得票数 0
1回答
如何使第二个列表项目被删除一次，而不是两次？
javascript
我有一个关于javascript问题的问题:第二个列表Jello总是在我的html中点击两次以被删除：
<ul id="Delete">
<li class="bold red" random="23">
<span>Notebook</span>
<button onclick="myfunction()">Delete</button>
</li>
<li>
浏览 1提问于2019-01-29得票数 1
回答已采纳
1回答
添加新列表项时，我创建的切换功能不起作用
javascript、html、css、dom
我用HTML，CSS和JavaScript创建了一个基本的核对表，当你点击列表项时，它会有一个删除线切换。但是，当我添加新的项目时，我不能对它们使用切换。
我已经创建了一个for循环来让列表项监听点击，以及一个函数，它在单击时通过项添加一行，但如前所述，切换只适用于已经创建的列表项。
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul
浏览 10提问于2019-07-17得票数 1
回答已采纳
2回答
JQuery自关闭运行时创建的安莉
javascript、jquery
我有一些在运行时添加列表项的jquery代码： function addlistitem() {
$('#mylist ul').append(`
<li class="list-group-item">
<button onclick="selfclose()">Del</button>
Some Text Here
</li>`);
} 而html是： <div id='mylist'>
<ul class="
浏览 26提问于2019-02-13得票数 1
回答已采纳
1回答
虽然有两个单独的点击监听程序，但它们似乎都是同时点击的。为什么？
javascript
我正在用javascript写一个待办事项列表。我想要一个代码来删除一个任务时，按钮被点击，并检查任务完成时，任务本身被单击。到目前为止，我已经编写了代码below.But我的问题是，当我向列表添加任务，然后我想删除时，会发生一些错误。可能是因为删除和任务本身都被单击了。因为我已经为它们添加了两个单独的onclick监听器，我不明白为什么它们都被点击了？下面是我的js代码：
let newTask = document.getElementById('new-task');
let addButton = document.getElementById('add-btn
浏览 0提问于2020-07-20得票数 0
6回答
如何在动态元素上绑定bootstrap popover
javascript、jquery、twitter-bootstrap、dom、bootstrap-popover
我在动态列表中使用Twitter Bootstrap的弹出窗口。列表项有一个按钮，当我单击该按钮时，它应该会弹出。当我在非动态上测试时，它工作得很好。
这是我的非动态列表的JavaScript
$("button[rel=popover]").popover({
placement : 'right',
container : 'body',
html : true,
//content:" <div style='color:red'>This is your div con
浏览 4提问于2013-06-08得票数 60
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
