如何清除 Javascript 中的列表，即一键删除列表中的所有项目？答案

【问题标题】：How do you clear a list in Javascript, i.e. delete all items in a list with one button click?如何清除 Javascript 中的列表，即一键删除列表中的所有项目？
【发布时间】：2021-03-24 04:28:26
【问题描述】：

我的删除单个任务项的代码可以正常工作，但是一键删除所有任务项的代码不起作用。有没有一种简单的方法可以删除所有内容或重置列表？

完整代码：https://jsfiddle.net/hufflepuff_hamlet/r9uogxwL/2/

<button class="btn btn-danger" onclick="removeAll()">
<span class="glyphicon glyphicon-remove"> Clear All Tasks</span></button>


 //Clear Completed Task 
 
 $(".completed").on("click",'.btn-danger',function(){  
   $(this).parent("li").remove();
   
 })

 //Clear all Tasks in List
 
function removeAll(){
    document.getElementById(".uncompleted").innerHTML = "";
}

【问题讨论】：

添加一个 id 到你的无序列表然后使用 $("#ul_id").empty()
请在此处发布minimal reproducible example，而不是在外部站点。您可以使用 Stack Snippet 使其可执行，类似于 codepen。
我在您的 codepen 中没有看到“清除所有任务”按钮。
uncompleted 不是一个 ID，它是一个类。使用document.querySelector(".uncompleted").innerHTML
对不起，我用正确的代码添加了小提琴链接

标签： javascript html jquery list button

【解决方案1】：

要删除 ul 中的所有 li 项目，您可以这样做

$('.uncompleted > li').remove();

或者你可以使用empty清空列表

$('.uncompleted').empty();

innerHTML = "" 应该也可以，但是您在选择元素时遇到了问题

document.getElementsByClassName("uncompleted")[0].innerHTML = "";

使用getElementsByClassName 而不是getElementById

【讨论】：

将内部 HTML 设置为空字符串不会有同样的效果吗？
谢谢，这是有道理的。它适用于已经存在的删除按钮，但是当我尝试将此代码专门应用于清除所有任务按钮时，它不起作用。我尝试使用简单的代替，但也无法正常工作。我想我需要了解如何启动要应用于此按钮的功能，然后添加您提供的代码。
我想通了！非常感谢您的帮助。