如何实现新增li元素时自动添加删除按钮并实现点击删除功能？

核心思路 #

1. 事件委托：把点击事件绑定在父元素<ul>上，无需为每个删除按钮单独绑定事件，不管是现有还是新增的按钮都能触发删除逻辑。
2. 动态生成元素：创建新<li>时自动插入删除按钮，避免手动重复编写按钮代码；同时用JS批量为现有<li>添加删除按钮，简化HTML结构。

完整代码实现 #

<!DOCTYPE html>
<html lang="zh-CN">
<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>INDEX</title>
    <style>
        .unordered li{
            float:left;
            margin: 10px;
            list-style: none;
            padding: 5px;
            border: 1px solid #eee;
        }
        .unordered button{
            background: lightcoral;
            outline: none;
            border: none;
            width: 70px;
            height: 30px;
            margin-left: 8px;
            cursor: pointer;
        }
        .unordered button:hover{
            background: rgb(231, 85, 85);
        }
        .add-item {
            clear: left;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>INDEX</h1>
    <!-- 添加输入框和添加按钮，用于创建新li -->
    <div class="add-item">
        <input type="text" id="itemInput" placeholder="输入内容添加新项">
        <button id="addBtn">添加</button>
    </div>
    <ul class="unordered">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    <script>
        const ul = document.querySelector('.unordered');
        const addBtn = document.getElementById('addBtn');
        const itemInput = document.getElementById('itemInput');

        // 为现有li批量添加删除按钮
        function initDeleteButtons() {
            const lis = ul.querySelectorAll('li');
            lis.forEach(li => {
                // 避免重复添加按钮
                if (!li.querySelector('button')) {
                    const deleteBtn = document.createElement('button');
                    deleteBtn.textContent = '删除';
                    li.appendChild(deleteBtn);
                }
            });
        }

        // 事件委托处理删除逻辑
        ul.addEventListener('click', function(e) {
            if (e.target.tagName === 'BUTTON') {
                // 删除当前按钮的父元素li
                e.target.parentElement.remove();
            }
        });

        // 动态创建新li并自动添加删除按钮
        addBtn.addEventListener('click', function() {
            const text = itemInput.value.trim();
            if (!text) return;
            
            const newLi = document.createElement('li');
            newLi.textContent = text;
            
            const deleteBtn = document.createElement('button');
            deleteBtn.textContent = '删除';
            newLi.appendChild(deleteBtn);
            
            ul.appendChild(newLi);
            itemInput.value = '';
        });

        // 页面加载完成后初始化现有li的删除按钮
        window.addEventListener('load', initDeleteButtons);
    </script>
</body>
</html>

关键代码说明 #

• 事件委托：通过给<ul>绑定click事件，利用事件冒泡机制，判断点击的元素是删除按钮时执行删除操作。不管是页面初始的按钮还是后续新增的按钮，都能触发删除逻辑，无需重复绑定事件。
• 批量初始化按钮：initDeleteButtons函数遍历所有现有<li>，自动添加删除按钮，HTML里不用手动为每个<li>写按钮代码。
• 动态创建li：点击"添加"按钮时，创建新的<li>元素，同时生成删除按钮并插入其中，直接添加到<ul>中，实现新增项自动带删除按钮的效果。

内容的提问来源于stack exchange，提问作者Alisha Choudhary