HTML复选框onclick事件二次勾选无法生成按钮问题排查求助

问题原因 #

• 核心错误出在removeButton函数的删除逻辑：Element.remove()方法无入参，作用是删除调用该方法的元素本身。你写的document.getElementById('DropArea').remove(目标按钮元素)会直接删除整个DropArea容器，后续重新勾选复选框时，按钮要插入的容器已经不存在，自然无法生成新按钮，且该操作不会触发控制台报错，符合你遇到的现象。
• 次要隐患：点击生成的按钮触发someMsg函数时，手动修改复选框checked为false的操作不会触发复选框的onclick事件，会导致全局变量checked的状态和实际复选框状态不一致。

修复方案 #

修正removeButton函数 #

将删除逻辑改为直接删除目标按钮即可：

function removeButton(id,name)
{
  var idofButton = id+'11'
  var targetBtn = document.getElementById(idofButton)
  if(targetBtn && document.getElementById('DropArea').contains(targetBtn))
  {
    // 直接删除目标按钮，不要操作父容器的remove方法
    targetBtn.remove()
    console.log('Button Removed');
  }
}

优化someMsg函数（可选，消除状态不同步隐患） #

手动修改复选框状态后主动调用更新函数，保证状态一致：

function someMsg(id)
{
  var checkboxId = id.substring(0,id.length-2);
  var checkbox = document.getElementById(checkboxId)
  document.getElementById(id).remove();
  checkbox.checked = false;
  // 主动触发状态更新，同步全局状态
  updateValue(checkboxId, checkbox.name)
  console.log('Deleted');
}

额外优化建议 #

• 移除无意义的全局checked变量，直接在updateValue中判断复选框状态即可
• 修正HTML中第一个div的id属性，不要包含空格：<div id="filterDropAreaContainer">
• 建议将复选框的onclick事件替换为onchange，更符合复选框状态变更的触发语义

完整可运行代码 #

HTML #

<div id="filterDropAreaContainer">
  <input type="checkbox" name="priceFilter"  id="priceFilter" class="btn" onchange="updateValue(this.id,this.name)">
  Price Filter
</div>

<div id="DropArea">
  
</div>

JavaScript #

var objTo = document.getElementById('DropArea');

function updateValue(id,name)
{
  const checkbox = document.getElementById(id)
  if(checkbox.checked) {
    addButton(id,name);
  } else {
    removeButton(id,name);
  }
}

function addButton(id,name)
{
  var nameOfButton = name+'X';
  var idofButton = id+'11';
  // 避免重复生成按钮
  if(document.getElementById(idofButton)) return
  var btn = document.createElement("BUTTON");
  btn.innerHTML=nameOfButton;
  btn.setAttribute("class","btnCancel");
  btn.setAttribute("id",idofButton);
  btn.setAttribute("onclick","someMsg(this.id)")
  objTo.appendChild(btn);
}

function removeButton(id,name)
{
  var idofButton = id+'11'
  var targetBtn = document.getElementById(idofButton)
  if(targetBtn && objTo.contains(targetBtn))
  {
    targetBtn.remove()
    console.log('Button Removed');
  }
}
function someMsg(id)
{
  var checkboxId = id.substring(0,id.length-2);
  var checkbox = document.getElementById(checkboxId)
  document.getElementById(id).remove();
  checkbox.checked=false;
  updateValue(checkboxId, checkbox.name)
  console.log('Deleted');
}

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