如何显示待办事项列表中的删除按钮

要在待办事项列表中显示删除按钮，可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例，展示了如何创建一个待办事项列表，并在每个待办事项旁边添加一个删除按钮。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项列表</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="todo-app">
        <h1>待办事项</h1>
        <input type="text" id="todo-input" placeholder="添加新的待办事项">
        <button id="add-todo">添加</button>
        <ul id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

body {
    font-family: Arial, sans-serif;
}

#todo-app {
    width: 300px;
    margin: 0 auto;
}

#todo-input {
    width: 200px;
    padding: 10px;
    margin-right: 10px;
}

#todo-list {
    list-style-type: none;
    padding: 0;
}

.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.delete-btn {
    background-color: #ff4d4d;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

JavaScript部分（script.js）

document.getElementById('add-todo').addEventListener('click', function() {
    const input = document.getElementById('todo-input');
    const newItem = document.createElement('li');
    newItem.className = 'todo-item';
    newItem.textContent = input.value;

    const deleteBtn = document.createElement('button');
    deleteBtn.className = 'delete-btn';
    deleteBtn.textContent = '删除';
    deleteBtn.addEventListener('click', function() {
        newItem.remove();
    });

    newItem.appendChild(deleteBtn);
    document.getElementById('todo-list').appendChild(newItem);
    input.value = '';
});

解释

HTML部分：定义了一个简单的页面结构，包括一个输入框、一个添加按钮和一个无序列表。
CSS部分：设置了基本的样式，使待办事项列表看起来更美观，并为删除按钮定义了样式。
JavaScript部分：添加了一个事件监听器，当用户点击“添加”按钮时，会创建一个新的待办事项项，并在其旁边添加一个删除按钮。点击删除按钮时，对应的待办事项项会被移除。