JavaScript移除元素后仍报Uncaught TypeError: ID_2 is null问题排查

我有一个JavaScript模块，通过监听事件触发移除HTML中的图片。移除图片后再次点击目标元素，会弹出如下错误：

Uncaught TypeError: ID_2 is null
<anonymous> remove.js:9
EventHandlerNonNull* remove.js:3
EventListener.handleEvent* remove.js:2

我添加了变量存在性检查，但第6次点击元素时错误仍会弹出，调试显示错误由ID_2.remove();中的ID_2导致。我的代码既不满足count === 5的条件，且ID_2为null，为何该错误仍会触发？

我的代码如下：

var count = 0;

document.addEventListener('DOMContentLoaded', function(){
    document.querySelector("#ID_1").onclick = function(){
        if(count === 5){

        var ID_2 = document.querySelector("#ID_2");
        if(ID_2 !== 'null' ){ID_2.remove();}
        }

        else{count++;}
        }})

• 判断条件逻辑错误：你写的if(ID_2 !== 'null')是把元素对象和字符串'null'做比较，但document.querySelector找不到元素时返回的是JavaScript的null值（不是字符串），所以这个判断永远成立。当ID_2是null时，依然会执行ID_2.remove()，自然触发TypeError。
• count计数逻辑问题：第6次点击时，count的值已经是5了。初始count=0，前5次点击都会进入else分支执行count++，第五次点击后count变成5，第六次点击就会触发if(count ===5)的分支，这时候图片已经被移除，querySelector找不到ID_2，返回null，再加上判断条件错误，就会执行remove()报错。

修复后的代码 #

var count = 0;

document.addEventListener('DOMContentLoaded', function(){
    document.querySelector("#ID_1").onclick = function(){
        if(count === 5){
            var ID_2 = document.querySelector("#ID_2");
            // 正确判断元素是否存在
            if(ID_2){
                ID_2.remove();
                // 移除后修改count，避免后续重复进入分支
                count = -1;
            }
        } else {
            count++;
        }
    }
})

关键修改点 #

1. 将ID_2 !== 'null'改为if(ID_2)，直接判断元素是否存在（null在条件判断中会被视为false）。
2. 移除图片后修改count的值（比如设为-1），避免后续点击再次进入移除分支，减少不必要的DOM查询。

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