如何在每次輸入後重置列表？

Question

這是乒乓測試。每次點擊開始按鈕並輸入一個數字，它就會添加到列表中。如何在每次輸入後重置列表？

$(document).ready(function() { 
    $("#Start").click(function() { 
     var number = parseInt(prompt("Please pick an integer to play.")); 

     for(index = 1; index <= number; index +=1) { 
      if (index % 15 === 0) { 
       $('#list').append("<li>" + "ping-pong" + "</li>"); 
      } else if (index % 3 === 0) { 
       $("#list").append("<li>" + "ping" + "</li>"); 
      } else if (index % 5 === 0) { 
       $("#list").append("<li>" + "pong" + "</li>"); 
      } else { 
       $("#list").append("<li>" + index + "</li>"); 
      } 
     } 
    }); 
}); 

Answer 1

之前提示，從#list

$("#Start").click(function() { 
    $("#list li").remove(); 
    var number = parseInt(prompt("Please pick an integer to play.")); 

Answer 2

要重置（空）您的列表中刪除li元素，使用

$('#list').empty(); 

Answer 3

而不是做.append的，做的.html（ ）

.append添加了一個新的子元素，但.html（）清除了它的所有子元素，使你添加的新元素成爲它的孩子。

試用：

$(document).ready(function() { 
    $("#Start").click(function() { 
     var number = parseInt(prompt("Please pick an integer to play.")); 

     for(index = 1; index <= number; index +=1) { 
      if (index % 15 === 0) { 
       $('#list').html("<li>" + "ping-pong" + "</li>"); 
      } else if (index % 3 === 0) { 
       $("#list").html("<li>" + "ping" + "</li>"); 
      } else if (index % 5 === 0) { 
       $("#list").html("<li>" + "pong" + "</li>"); 
      } else { 
       $("#list").html("<li>" + index + "</li>"); 
      } 
     } 
    }); 
});