JS如何向指定div添加元素，新增元素删除功能失效如何解决

问题根因 #

你把删除按钮嵌套进新增的monday_input div后，按钮的父节点层级发生了变化，原有删除逻辑里只找一层父节点的写法无法定位到要删除的根元素.subcategory，就会出现删不掉的问题。同时你原有删除逻辑中回减monday_id_count的操作存在隐患，会导致后续新增的textarea出现name重复的问题。

可行解决方案 #

调整动态生成的DOM结构，同时优化删除逻辑用closest()方法精准定位目标元素，不受嵌套层级影响，不需要提前在父级HTML中预创建div。

修改后完整JS代码

// 全局变量记得提前初始化
let monday_sub_count = 0;
let monday_id_count = 0;

// 添加功能
function add_monday() {
    if (monday_sub_count < 5) {
        monday_sub_count++;
        const mon = document.createElement('div');
        mon.className = 'subcategory';
        // 动态生成monday_input div包裹删除按钮
        mon.innerHTML = `<textarea name="monday${monday_id_count}" placeholder="Type anything you want here" class="subcategory_text"></textarea>
        <div class="monday_input">
            <input type="button" class="remove_button" value="-" onclick="removeMon(this)" />
        </div>`;
        monday_id_count++;
        document.getElementById('mon').appendChild(mon);
    }
}

// 删除功能
function removeMon(btn) {
    // 直接匹配最近的.subcategory祖先元素，不管中间嵌套了多少层div都能精准定位
    const targetItem = btn.closest('.subcategory');
    if(targetItem) {
        targetItem.remove();
        monday_sub_count--;
        // 不要回减monday_id_count，避免后续生成的textarea name属性重复
    }
}

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