How do you clear a list in jQuery, i.e. delete all items in a list with one button click?

Issue

My code to delete a single task item works correctly, but the code to delete all the task items in one click is not working. Is there a simple way to delete everything or reset the list?

Full code: 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 = "";
}

Solution

To remove all li items inside ul, you can do

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

Or you can use empty to empty the list

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

innerHTML = "" should have also worked, but you have an issue with selecting the element

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

Use getElementsByClassName instead of getElementById

Answered By - Abito Prakash