liceblue · Jul 6, 2026 · Jul 6, 2026
diff --git a/index.html b/index.html
@@ -17,6 +17,7 @@ <h1>我的第一个练习项目</h1>
           <input id="note-input" type="text" placeholder="写一条学习记录" autocomplete="off">
           <button type="submit">添加</button>
         </form>
+        <button id="clear-notes" class="clear-button" type="button">清空记录</button>
 
         <ul id="notes" class="notes">
           <li>初始化项目</li>

diff --git a/script.js b/script.js
@@ -1,6 +1,7 @@
 const form = document.querySelector("#note-form");
 const input = document.querySelector("#note-input");
 const notes = document.querySelector("#notes");
+const clearButton = document.querySelector("#clear-notes");
 
 form.addEventListener("submit", (event) => {
   event.preventDefault();
@@ -15,3 +16,7 @@ form.addEventListener("submit", (event) => {
   notes.appendChild(item);
   input.value = "";
 });
+
+clearButton.addEventListener("click", () => {
+  notes.replaceChildren();
+});
diff --git a/styles.css b/styles.css
@@ -68,6 +68,17 @@ h1 {
   cursor: pointer;
 }
 
+.clear-button {
+  margin-top: 12px;
+  border: 1px solid #c8d1dc;
+  border-radius: 6px;
+  padding: 9px 14px;
+  background: #ffffff;
+  color: #374151;
+  font-weight: 700;
+  cursor: pointer;
+}
+
 .notes {
   margin: 24px 0 0;
   padding-left: 20px;