JavaScript中使用if语句无法检测子元素类名问题排查

你遇到的问题是当liParent没有子元素时，children[0]会返回undefined，这时候直接访问.className会触发错误，导致后续代码无法执行。

修复方案 #

可以从两个层面优化判断逻辑，避免访问不存在的元素属性：

方案1：先判断子元素存在，再检查类名

修改printCourse函数中的判断部分，先确认liParent有子元素，再检查第一个子元素的类名（推荐用classList.contains替代直接比较className，避免多类名场景下判断失效）：

function printCourse (e){
    // 先确认有子元素，再检查是否包含emptyMsg类
    if(liParent.children.length > 0 && liParent.children[0].classList.contains("emptyMsg")){
        liParent.children[0].remove();
    }
    // 以下原有代码保持不变
    const courseCurrentBtn = e.currentTarget;
    const courseCurrentInput = courseCurrentBtn.previousElementSibling;
    const newLi = document.createElement("li");
    newLi.innerHTML = ` 
                <h5 class="courseName flex-grow-1"> ${courseCurrentInput.value} </h5>
                <button type="button" class="btn btn-outline-warning mx-2" onclick="editChapter(this)">Edit</button>
                <button type="button" class="btn btn-outline-danger" onclick="removeChapter(this)">Remove</button>
    `;
    newLi.className = "listName list-group-item d-flex flex-direction-column justify-content-even";
    liParent.appendChild(newLi);
}

方案2：直接用选择器查找目标元素（更简洁可靠）

不需要依赖子元素索引，直接通过类选择器查找emptyMsg元素，存在则移除：

function printCourse (e){
    // 直接查找emptyMsg元素，存在就移除
    const emptyMsgEl = liParent.querySelector(".emptyMsg");
    if(emptyMsgEl){
        emptyMsgEl.remove();
    }
    // 以下原有代码保持不变
    const courseCurrentBtn = e.currentTarget;
    const courseCurrentInput = courseCurrentBtn.previousElementSibling;
    const newLi = document.createElement("li");
    newLi.innerHTML = ` 
                <h5 class="courseName flex-grow-1"> ${courseCurrentInput.value} </h5>
                <button type="button" class="btn btn-outline-warning mx-2" onclick="editChapter(this)">Edit</button>
                <button type="button" class="btn btn-outline-danger" onclick="removeChapter(this)">Remove</button>
    `;
    newLi.className = "listName list-group-item d-flex flex-direction-column justify-content-even";
    liParent.appendChild(newLi);
}

补充说明 #

• 为什么不用className == "emptyMsg"：如果后续给该元素添加其他类名（比如你代码里的text-center），直接全等判断会失效，classList.contains或querySelector能适配多类名场景。
• 方案2的优势：不管emptyMsg元素是不是第一个子元素，都能精准找到并移除，逻辑更健壮。

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