移除'；这'；使用javascript单击列表元素

我正在处理一个待办事项列表，但我正在努力找到一个解决方案，使用普通Javascript，在单击列表项后将其删除

var delete_btns = document.getElementsByClassName('delete-btn');

var delete_task = function() {
    var li_id = this.getAttribute('data-id');
    document.getElementById(li_id).remove();
}

for (var i = 0; i < delete_btns.length; i++) {
    delete_btns[i].addEventListener('click', delete_task);
}

将用户输入添加为列表项是最简单的部分，但我刚刚意识到任务的这一特定部分比我最初怀疑的更具挑战性

这是我的第一个JS项目。对于附加的每个列表项，还有一个按钮元素作为子项添加到该列表项中

其想法是，当用户单击此按钮时，它将从无序列表中删除该特定列表项

有什么建议吗

document.getElementById（“添加”）.addEventListener（“单击”，函数）（）{
var taskinput=document.getElementById（“任务”）.value；
如果（任务输入）{
var tasktext=document.createTextNode（taskinput）；
var list=document.createElement（“li”）；
list.appendChild（tasktext）；
var button=document.createElement（“按钮”）；
setAttribute（“id”，“completed”）；
button.innerHTML=“已完成”；
list.appendChild（按钮）；
document.getElementById（“要执行的任务”）.appendChild（列表）；
document.getElementById（“任务”）.value=“”；
}否则{
警报（“请输入任务”）；
}
document.getElementById（“已完成”）.addEventListener（“单击”，函数）（）{
})
})

ul{
列表样式：无；
}
ulli{
位置：相对位置；
保证金：自动；
宽度：80%；
填充：2%2%2%2%；
边缘底部：10px；
颜色：白色；
边框：1px纯白；
边界半径：3px；
背景色：#6363B6；
}
li按钮{
显示：块；
宽度：自动；
高度：自动；
填充：1%；
明确：两者皆有；
浮动：对；
背景色：#6363B6；
}

未完成的任务

您可以使用自定义属性从按钮中标识所选项目的Id。数据属性在您的案例中很有用

按照以下步骤操作：

为任务创建

li

元素时。使用计数器分配唯一的id属性，例如id=1、2、3等

var list = document.createElement("li");
list.setAttribute('id', (value-of-last-li-id) + 1);

同样，在创建

按钮

元素时，为其指定一个数据属性

数据id

，该属性具有相同的li id值和公共

类

属性值

var button = document.createElement("button");
button.setAttribute('data-id', (value-of-last-li-id) + 1);
button.setAttribute('class', 'delete-btn');

为该按钮上的

单击

事件添加事件侦听器，该侦听器将获取按钮的

数据id

，使用该值，您可以删除具有相同

数据id

值的

li

元素

var delete_btns = document.getElementsByClassName('delete-btn');

var delete_task = function() {
    var li_id = this.getAttribute('data-id');
    document.getElementById(li_id).remove();
}

for (var i = 0; i < delete_btns.length; i++) {
    delete_btns[i].addEventListener('click', delete_task);
}

var delete_btns=document.getElementsByClassName（'delete-btn'）；
var delete_task=函数（）{
var li_id=this.getAttribute（'data-id'）；
document.getElementById（li_id）.remove（）；
}
对于（变量i=0；i

---

您可以使用自定义属性从按钮中标识所选项目的Id。数据属性在您的案例中很有用

按照以下步骤操作：

为任务创建

li

元素时。使用计数器分配唯一的id属性，例如id=1、2、3等

var list = document.createElement("li");
list.setAttribute('id', (value-of-last-li-id) + 1);

同样，在创建

按钮

元素时，为其指定一个数据属性

数据id

，该属性具有相同的li id值和公共

类

属性值

var button = document.createElement("button");
button.setAttribute('data-id', (value-of-last-li-id) + 1);
button.setAttribute('class', 'delete-btn');

为该按钮上的

单击

事件添加事件侦听器，该侦听器将获取按钮的

数据id

，使用该值，您可以删除具有相同

数据id

值的

li

元素

var delete_btns = document.getElementsByClassName('delete-btn');

var delete_task = function() {
    var li_id = this.getAttribute('data-id');
    document.getElementById(li_id).remove();
}

for (var i = 0; i < delete_btns.length; i++) {
    delete_btns[i].addEventListener('click', delete_task);
}

var delete_btns=document.getElementsByClassName（'delete-btn'）；
var delete_task=函数（）{
var li_id=this.getAttribute（'data-id'）；
document.getElementById（li_id）.remove（）；
}
对于（变量i=0；i

---

这可能会帮助您如何

删除单击的元素


var listItem=document.querySelectorAll（'li'）；
console.log（listItem）
listItem.forEach（函数（$li）{
$li.addEventListener（'click'，function（）{
if（$li.classList.contains（'completed'））{
$li.remove（）
}
})
})
ul{
列表样式：无；
}
ul>li{
背景：#d2d2d2；
利润率：10px；
填充：10px；
光标：指针；
}
ul>li.已完成{
背景：红色；
}

任务1
任务2
任务3
任务4
任务5
这可能会帮助您如何
删除已单击的元素


var listItem=document.querySelectorAll（'li'）；
console.log（listItem）
listItem.forEach（函数（$li）{
$li.addEventListener（'click'，function（）{
if（$li.classList.contains（'completed'））{
$li.remove（）
}
})
})
ul{
列表样式：无；
}
ul>li{
背景：#d2d2d2；
利润率：10px；
填充：10px；
光标：指针；
}
ul>li.已完成{
背景：红色；
}

任务1
任务2
任务3
任务4
任务5
不要给出按钮ID。您将有重复的ID。而是在创建按钮的同时添加事件侦听器。这样，您也可以立即访问li

... 
var button = document.createElement("button");
button.addEventListener("click", function() {
    list.parentNode.removeChild(list);
});
... 

不要给按钮标识。您将有重复的ID。而是在创建按钮的同时添加事件侦听器。这样，您也可以立即访问li

... 
var button = document.createElement("button");
button.addEventListener("click", function() {
    list.parentNode.removeChild(list);
});
... 

id为
add
、
task
和
completed
的元素在哪里。非常抱歉，这是复制+粘贴错误。并且已完成的任务id被分配到另一个
列表中，项目将移动到该列表中。id为
add
、
task
和
completed
的元素在哪里。非常抱歉，这是一个复制+粘贴错误