实现标签点击删除功能控制台报TypeError，无法定位undefined值原因求助

你遇到的TypeError核心来自两个问题：

• removeArray函数仅在匹配到目标元素且result为true时返回数组，未匹配到目标时无返回值（即返回undefined），你在删除列表内容时直接对返回结果调用join方法，undefined没有对应方法就会抛出类型错误。
• 每次新增标签都调用removeItem给所有已存在的标签重复绑定点击事件，后续点击一次标签会触发多次删除逻辑，也会引发异常。

下面是修改后的完整代码，已解决所有报错和隐患：

const ingredientsInput = document.querySelector('#ingredients'),
      ingredientsContainer = document.querySelector('.ingredients__tag');
let ingredientsArray = [];

ingredientsInput.addEventListener('input', () => {
    if (ingredientsInput.value.includes(',')) {
        let v = ingredientsInput.value.replace(',', '').trim();
        // 修复原判断里的赋值错误，同时增加trim避免空内容标签
        if(v !== '' && v !== ',') {
            let s = document.createElement('span');
            s.setAttribute('class', 'tag__item');
            s.innerHTML = v;
            // 新增标签时直接绑定点击事件，不用全局遍历重复绑定
            s.addEventListener('click', () => {
                recipesInclude(v, false);
                removeArray(ingredientsArray, v, false);
                s.remove();
                console.log(ingredientsArray);
            });
            ingredientsContainer.appendChild(s);
            ingredientsArray.push(v);
            recipesInclude(v, true);
            ingredientsInput.value = "";    
        } else if(v === ',') {    
            ingredientsInput.value = "";
        }
        console.log(ingredientsArray);
    }
});

function removeArray(array, target, result) {
    for(let i = 0; i < array.length; i++){     
        if(array[i] === target) {     
            array.splice(i, 1); 
            break; // 匹配到就跳出，避免相同元素被多次删除
        }    
    }
    // 无论是否匹配到都返回数组，避免返回undefined
    if(result) return array;
}

function recipesInclude(ingredient, statement) {
    // 变量加声明，避免隐式全局变量
    const ingredientLead = document.querySelector('.list');
    if(statement) {
        if(ingredientLead.innerText.length > 0) {
            ingredientLead.innerHTML += ', ' + ingredient;
        } else {
            ingredientLead.innerHTML += ingredient;
        }
    } else {
        const ingredientSplit = ingredientLead.innerText.split(", ");        
        const processedArray = removeArray(ingredientSplit, ingredient, true);
        // 统一处理返回结果，不用分长度判断
        ingredientLead.innerHTML = processedArray.join(", ");
    }
}

原有HTML代码无需修改即可正常运行。

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