jQuery 实战：打造可添加与删除任务的待办事项列表应用

以下是一个使用 jQuery 创建待办事项列表应用程序的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>待办事项列表</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> body { font-family: Arial, sans-serif; } ul { list-style-type: none; padding: 0; } li { padding: 10px; border: 1px solid #ccc; margin-bottom: 5px; } button { padding: 5px 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <h2>待办事项列表</h2> <input type="text" id="taskInput"> <button id="addBtn">添加</button> <ul id="todoList"> </ul> <script> $(document).ready(function () { $("#addBtn").click(function () { var taskText = $("#taskInput").val(); if (taskText!= "") { $("#todoList").append('<li>' + taskText + '<button class="deleteBtn">删除</button></li>'); $("#taskInput").val(""); } }); $(document).on("click", ".deleteBtn", function () { $(this).parent().remove(); }); }); </script> </body> </html> ``` 在上述代码中，当点击"添加"按钮时，如果输入框不为空，就会将输入的任务添加到列表中，并附带一个"删除"按钮。当点击"删除"按钮时，对应的任务项会被移除。 ######[AI写代码神器 | 499点数解答 | 2024-10-29 20:40:48]

服务商

更多选项

快捷项

自定义