为动态生成HTML元素分配唯一ID的实践指南

function displayInputIntro() {
    var submitbutton = document.getElementById('submitbutton');
    var intro = document.getElementById('Intro');
    var introNewSection = document.getElementById('intro-row');

    // 原始尝试，ID硬编码为 'intro'，导致重复
    introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id="intro">';
    submitbutton.style.display = '';
}

// 错误的拼接方式，缺少引号或加号
introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id="' + uniqueID '"'><a href="javascript;;"  onclick="deleteInputFunc()">Remove Input</a>';

function displayInputIntro() {
    var introNewSection = document.getElementById('intro-row');
    // 生成一个基于当前时间戳的唯一ID
    // Date.now() 比 new Date() 更简洁，直接返回毫秒数
    var uniqueId = 'intro-' + Date.now(); 

    // 正确地将 uniqueId 变量拼接到 HTML 字符串中
    introNewSection.innerHTML += `
        <div class="col-lg-5 mb-lg-0 mb-4" id="${uniqueId}">
            <!-- 其他内容 -->
            <a href="javascript:;" onclick="deleteInputFunc('${uniqueId}')">Remove Input</a>
        </div>
    `;
    // 注意：这里使用了模板字符串 (backticks ``) 来简化字符串拼接，
    // 也可以使用传统的加号 (+) 进行拼接：
    /*
    introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id="' + uniqueId + '">' +
                                 '<!-- 其他内容 -->' +
                                 '<a href="javascript:;" onclick="deleteInputFunc(\'' + uniqueId + '\')">Remove Input</a>' +
                                 '</div>';
    */
    document.getElementById('submitbutton').style.display = '';
}

// 对应的删除函数
function deleteInputFunc(elementId) {
    var elementToRemove = document.getElementById(elementId);
    if (elementToRemove) {
        elementToRemove.remove(); // 或者 elementToRemove.parentNode.removeChild(elementToRemove);
    }
}

function displayInputIntroWithDOM() {
    var introNewSection = document.getElementById('intro-row');
    var submitbutton = document.getElementById('submitbutton');

    // 1. 创建新的 div 元素
    var newDiv = document.createElement('div');
    // 2. 分配唯一的 ID
    var uniqueId = 'intro-dom-' + Date.now();
    newDiv.id = uniqueId;
    // 3. 添加 CSS 类
    newDiv.classList.add('col-lg-5', 'mb-lg-0', 'mb-4');

    // 4. 创建内部的链接元素
    var removeLink = document.createElement('a');
    removeLink.href = 'javascript:;'; // 或者 '#' 并阻止默认行为
    removeLink.textContent = 'Remove Input';

    // 5. 为链接添加事件监听器
    // 使用 addEventListener 是推荐的方式，因为它更灵活，且不会覆盖其他事件
    removeLink.addEventListener('click', function() {
        // 在事件处理函数中，this 指向 removeLink，
        // removeLink.parentNode 指向 newDiv，
        // 也可以直接通过 uniqueId 删除 newDiv
        // newDiv.remove(); // 直接删除 newDiv
        deleteInputFunc(uniqueId); // 调用通用删除函数
    });

    // 6. 将链接添加到新创建的 div 中
    newDiv.appendChild(removeLink);

    // 7. 将完整的 div 添加到页面中
    introNewSection.appendChild(newDiv);

    submitbutton.style.display = '';
}

// 删除函数与之前相同
function deleteInputFunc(elementId) {
    var elementToRemove = document.getElementById(elementId);
    if (elementToRemove) {
        elementToRemove.remove();
    }
}