使用JavaScript创建可随机化表格后无法在后续逻辑中删除的解决方法

问题描述 #

我正在搭建一个包含152道统计题的单页自学考试网页，通过监听点击事件、用if-else if条件切换展示不同题目。第19题的表格是用JavaScript动态创建的（用来随机化内容），但切换到第20题时，这个表格还留在页面上。尝试用以下代码删除时，获取到的表格元素始终是null：

else if (current-clicks == 19){
    const body = document.body
    tbl = document.creatElement('table'); // 注意：这里拼写错误，应该是createElement
    tbl.style.width = '100px';
    tbl.style.border = '1px solid black';
    for (let i = 0; i < 5; i++) {  // 行数
        const tr = tbl.insertRow(); // 创建行
        for (let j = 0; j < 3; j++) { // 列数
            const td = tr.insertCell(); // 创建单元格
            // 随机填充内容的逻辑
            // const textNode = document.createTextNode("x"); td.appendChild(textNode);
            td.style.border = '1px solid black';
        }
    }
    body.appendChild(tbl);
}  

else if (current-clicks == 20){
    var removeTable = document.getElementById('table');
    var parent1 = removeTable.parentNode;
    parent1.removeChild(removeTable);
}

问题出在：动态创建的表格没有唯一标识（比如ID），你尝试用document.getElementById('table')查找，但表格根本没设置这个ID；另外局部创建的tbl变量在其他条件块里也访问不到。

三种可行的修改方法 #

方法1：给表格添加唯一ID，通过ID查找删除

这是最直接的方式，给第19题的表格加一个专属ID，删除时通过这个ID定位元素：

// 处理第19题
else if (currentClicks === 19) { // 建议把current-clicks改成驼峰式currentClicks，避免语法问题
    const body = document.body;
    const tbl = document.createElement('table'); // 修正拼写错误
    tbl.id = 'question19-table'; // 添加唯一ID
    tbl.style.width = '100px';
    tbl.style.border = '1px solid black';
    
    for (let i = 0; i < 5; i++) {
        const tr = tbl.insertRow();
        for (let j = 0; j < 3; j++) {
            const td = tr.insertCell();
            // 示例随机内容
            const textNode = document.createTextNode(Math.random() > 0.5 ? 'x' : 'o');
            td.appendChild(textNode);
            td.style.border = '1px solid black';
        }
    }
    body.appendChild(tbl);
}

// 处理第20题
else if (currentClicks === 20) {
    const removeTable = document.getElementById('question19-table');
    if (removeTable) { // 先判断元素是否存在，避免报错
        removeTable.remove(); // 直接调用remove方法删除，比找父节点再删更简洁
    }
    // 这里添加第20题的内容渲染逻辑
}

方法2：用全局变量存储表格引用

在所有条件块之外声明一个全局变量，用来保存第19题表格的引用，删除时直接操作这个变量：

// 全局变量，用来存第19题的表格引用
let question19Table = null;

// ...其他代码

// 处理第19题
else if (currentClicks === 19) {
    const body = document.body;
    question19Table = document.createElement('table'); // 把引用赋值给全局变量
    question19Table.style.width = '100px';
    question19Table.style.border = '1px solid black';
    
    for (let i = 0; i < 5; i++) {
        const tr = question19Table.insertRow();
        for (let j = 0; j < 3; j++) {
            const td = tr.insertCell();
            const textNode = document.createTextNode(Math.random() > 0.5 ? 'x' : 'o');
            td.appendChild(textNode);
            td.style.border = '1px solid black';
        }
    }
    body.appendChild(question19Table);
}

// 处理第20题
else if (currentClicks === 20) {
    if (question19Table && question19Table.parentNode) {
        question19Table.parentNode.removeChild(question19Table);
        question19Table = null; // 删除后清空变量，避免重复操作
    }
    // 第20题内容渲染逻辑
}

方法3：统一用容器管理动态内容（推荐，适合152道题的场景）

既然是单页展示大量题目，最好专门建一个容器来放每道题的动态内容，每次切换题目时先清空容器，再渲染当前题的内容，不用单独处理删除：

首先在HTML里加一个容器：

<!-- 用来放当前题的动态内容 -->
<div id="dynamic-question-content"></div>

然后修改JS逻辑：

// 获取容器元素（全局只需要获取一次）
const dynamicContainer = document.getElementById('dynamic-question-content');

// 切换题目的核心函数
function switchToQuestion(currentClicks) {
    // 先清空容器里的所有内容，不管之前是什么
    dynamicContainer.innerHTML = '';

    if (currentClicks === 1) {
        // 渲染第1题的内容，比如：
        dynamicContainer.innerHTML = '<p>第1题：xxxx</p>';
    } 
    // ...其他题目逻辑
    else if (currentClicks === 19) {
        const tbl = document.createElement('table');
        tbl.style.width = '100px';
        tbl.style.border = '1px solid black';
        
        for (let i = 0; i < 5; i++) {
            const tr = tbl.insertRow();
            for (let j = 0; j < 3; j++) {
                const td = tr.insertCell();
                const textNode = document.createTextNode(Math.random() > 0.5 ? 'x' : 'o');
                td.appendChild(textNode);
                td.style.border = '1px solid black';
            }
        }
        dynamicContainer.appendChild(tbl);
    } else if (currentClicks === 20) {
        // 渲染第20题的内容
        dynamicContainer.innerHTML = '<p>第20题：xxxx</p>';
    }
    // ...剩下150道题的逻辑
}

这种方法的好处是一劳永逸，不管哪道题有动态元素，切换时都会被清空，不用为每个动态元素写单独的删除逻辑，适合你这种多题的场景。

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