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

<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 });
    });
});