如何在JS中新建的每一个列表项上都附加“删除按钮”？

在JavaScript中为每个新创建的列表项附加一个“删除按钮”，可以通过以下步骤实现：

基础概念

DOM操作：文档对象模型（DOM）允许JavaScript动态地访问和更新HTML文档的内容、结构和样式。
事件监听：为元素添加事件监听器，以便在特定事件（如点击）发生时执行代码。

实现步骤

创建列表项：使用JavaScript动态创建列表项（<li>）。
创建删除按钮：为每个列表项创建一个删除按钮（<button>）。
附加删除按钮：将删除按钮附加到列表项中。
添加事件监听器：为删除按钮添加点击事件监听器，以便在点击时删除对应的列表项。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态添加删除按钮</title>
</head>
<body>
    <ul id="list">
        <!-- 初始列表项 -->
        <li>Item 1 <button class="delete-btn">删除</button></li>
    </ul>
    <button id="add-btn">添加列表项</button>

    <script>
        // 获取列表和添加按钮
        const list = document.getElementById('list');
        const addButton = document.getElementById('add-btn');

        // 添加列表项的函数
        function addItem() {
            const newItem = document.createElement('li');
            newItem.textContent = `Item ${list.children.length + 1}`;

            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.classList.add('delete-btn');

            // 为删除按钮添加点击事件监听器
            deleteButton.addEventListener('click', function() {
                list.removeChild(newItem);
            });

            // 将删除按钮附加到列表项中
            newItem.appendChild(deleteButton);

            // 将列表项附加到列表中
            list.appendChild(newItem);
        }

        // 为添加按钮添加点击事件监听器
        addButton.addEventListener('click', addItem);
    </script>
</body>
</html>