如何确保动态移除的列表项数据不被表单提交

<form id="itemSelectionForm">
    <h2>已选项目</h2>
    <ul id="selectedItemsList">
        <li>
            <span>项目 A</span>
            <input type="hidden" name="selectedIds" value="item_A_123">
            <button type="button" class="remove-btn">移除</button>
        </li>
        <li>
            <span>项目 B</span>
            <input type="hidden" name="selectedIds" value="item_B_456">
            <button type="button" class="remove-btn">移除</button>
        </li>
        <!-- 更多项目可以在运行时动态添加 -->
    </ul>
    <button type="submit">提交选中的项目</button>
</form>

document.addEventListener('DOMContentLoaded', () => {
    const selectedItemsList = document.getElementById('selectedItemsList');
    const itemSelectionForm = document.getElementById('itemSelectionForm');

    // 1. 实现列表项的移除功能 (使用事件委托)
    // 使用事件委托的好处是，即使未来动态添加了新的<li>，它们的移除按钮也能正常工作，
    // 无需为每个新按钮单独添加事件监听器。
    selectedItemsList.addEventListener('click', function(event) {
        // 检查点击事件的目标是否是带有 'remove-btn' 类的按钮
        if (event.target.classList.contains('remove-btn')) {
            // 找到离当前点击按钮最近的 <li> 父元素
            const listItemToRemove = event.target.closest('li');
            if (listItemToRemove) {
                // 彻底从DOM中移除该 <li> 元素及其所有子元素（包括隐藏的input）
                listItemToRemove.remove();
                console.log('列表项已从DOM中彻底移除。');
            }
        }
    });

    // 2. 监听表单提交事件，用于验证数据
    itemSelectionForm.addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单的默认提交行为

        // 使用 FormData API 收集当前表单数据
        // FormData 会遍历当前 DOM 中所有具有 name 属性的表单控件
        const formData = new FormData(this);
        const submittedData = {};

        // 将 FormData 转换为一个普通对象以便于查看
        for (let [name, value] of formData.entries()) {
            // 处理同名输入（例如多个 selectedIds），将它们收集到数组中
            if (submittedData.hasOwnProperty(name)) {
                if (!Array.isArray(submittedData[name])) {
                    submittedData[name] = [submittedData[name]];
                }
                submittedData[name].push(value);
            } else {
                submittedData[name] = value;
            }
        }

        console.log('表单提交的数据:', submittedData);

        // 在实际应用中，这里会将 submittedData 发送到后端服务器
        // 例如：fetch('/api/submit-items', { method: 'POST', body: formData });
    });
});

// 假设有一个添加按钮和输入框
// <input type="text" id="newItemText" placeholder="新项目名称">
// <button type="button" id="addItemBtn">添加项目</button>

const addItemBtn = document.getElementById('addItemBtn');
const newItemText = document.getElementById('newItemText');

if (addItemBtn && newItemText) {
    addItemBtn.addEventListener('click', () => {
        const text = newItemText.value.trim();
        if (text) {
            const newListItem = document.createElement('li');
            // 简单生成一个唯一ID，实际应用中可能需要更复杂的ID生成策略
            const newId = 'item_' + Date.now(); 
            newListItem.innerHTML = `
                <span>${text}</span>
                <input type="hidden" name="selectedIds" value="${newId}">
                <button type="button" class="remove-btn">移除</button>
            `;
            selectedItemsList.appendChild(newListItem);
            newItemText.value = ''; // 清空输入框
            console.log('新列表项已添加。');
        }
    });
}