Symfony表单中JavaScript移除按钮条件未生效问题求助

核心错误点 #

1. 判断条件误用赋值运算符
   在移除按钮的点击事件中，if(idcounter = 1)是赋值操作，不是判断逻辑。每次点击删除时，都会强制把idcounter设为1，随即触发隐藏按钮的代码，这就是首次删除就提前隐藏按钮的原因。必须改用比较运算符===（严格相等）或==（宽松相等）。

2. id变量未实时更新
   当前id变量仅在初始化时生成一次，每次新增输入框都会重复使用同一个id，导致DOM元素id冲突，且删除时只能移除第一次新增的输入框，后续新增的无法正确删除。需要在每次新增/删除操作时实时生成对应id。

修复后的代码 #

var idcounter = 1;

document.getElementById("addwishedlanguage").onclick = function() {
    console.log(idcounter);
    // 每次新增时实时生成新id
    var currentId = "user_wishedlanguages" + idcounter;
    const wishedlanguageselect = document.getElementById("user_wishedlanguages");
    const newwishedlanguageselect = wishedlanguageselect.cloneNode(true);
    newwishedlanguageselect.id = currentId;
    document.querySelector('.wishedlanguagelist').appendChild(newwishedlanguageselect);
    document.getElementById("removewishedlanguage").style.display = "initial";
    idcounter++;
}

document.getElementById("removewishedlanguage").onclick = function() {
    idcounter--;
    // 实时获取要删除的元素id
    var targetId = "user_wishedlanguages" + idcounter;
    const elementToRemove = document.getElementById(targetId);
    // 增加元素存在性判断，避免报错
    if (elementToRemove) {
        elementToRemove.remove();
    }
    // 用严格相等判断是否隐藏移除按钮
    if(idcounter === 1) {
        document.getElementById("removewishedlanguage").style.display = "none";
    }
    console.log(idcounter);
}

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