如何解决JSHint警告：循环内函数引用外部作用域变量问题

JSHint的W083警告提示你在循环内声明的函数引用了外部作用域的变量（这里是comment_ul），可能导致语义混淆或意外行为。你的代码还存在一个隐性bug：每次点击评论按钮，都会重新获取所有删除按钮并重复绑定点击事件，导致同一个按钮被多次绑定，点击一次会执行多次删除操作。

以下是两种可行的解决方案：

方案1：使用事件委托（推荐） #

利用事件冒泡机制，直接给父容器comment_ul绑定一次点击事件，无需循环给每个删除按钮单独绑定。这种方法性能更高，也从根源上消除了警告。

var comment_btn=document.querySelector('.comment_button');
var comment_ul=document.querySelector('.comment_ul');
var comment_text=document.querySelector('#comment');

// 给父容器绑定事件，统一处理所有子删除按钮的点击
comment_ul.addEventListener('click', function(e) {
    // 判断点击目标是删除按钮
    if (e.target.classList.contains('comment_a')) {
        comment_ul.removeChild(e.target.parentNode);
    }
});

comment_btn.onclick = function(){
    var comment_li = document.createElement('li');
    comment_li.className = 'comment_li';
    // 用trim()处理空输入更严谨
    if(comment_text.value.trim() !== '') {
        comment_li.innerHTML = comment_text.value + "<a class='comment_a' href='javascript:;'>Delete</a>";
        comment_ul.insertBefore(comment_li,comment_ul.children[0]);
        comment_text.value = ''; // 新增：清空输入框，提升用户体验
    } else {
        alert('Please input!');
    }
};

方案2：创建元素时直接绑定事件 #

每次创建新评论项时，直接给对应的删除按钮绑定点击事件，避免循环遍历所有元素，自然不会触发警告。同时用DOM API创建元素，比innerHTML更安全（避免潜在XSS风险）。

var comment_btn=document.querySelector('.comment_button');
var comment_ul=document.querySelector('.comment_ul');
var comment_text=document.querySelector('#comment');

comment_btn.onclick = function(){
    if(comment_text.value.trim() !== '') {
        var comment_li = document.createElement('li');
        comment_li.className = 'comment_li';
        
        var contentText = document.createTextNode(comment_text.value);
        var delBtn = document.createElement('a');
        delBtn.className = 'comment_a';
        delBtn.href = 'javascript:;';
        delBtn.textContent = 'Delete';
        
        // 直接给当前删除按钮绑定事件
        delBtn.onclick = function() {
            comment_ul.removeChild(comment_li);
        };
        
        comment_li.appendChild(contentText);
        comment_li.appendChild(delBtn);
        comment_ul.insertBefore(comment_li,comment_ul.children[0]);
        comment_text.value = ''; // 清空输入框
    } else {
        alert('Please input!');
    }
};

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