HTML 复选框 "onclick" 创建按钮问题

Question

所以我在复选框点击事件中有以下目标
1] 在指定的 div
中创建一个具有 id = 'id-of-checkbox'+'some-character-here' 的按钮 2] 单击该特定按钮将删除该按钮以及与之相关的复选框勾选
3] 如果用户想通过取消选中复选框来删除指定 div 中的按钮，应该这样做
4] 如果用户再次选中复选框按钮，则应在指定的 div

中创建

现在我已经实现了前 3 个目标，但我对第 4 个目标有疑问，即
如果我在取消勾选后再次单击复选框，则不会创建按钮并且控制台不会
return 任何与之相关的错误.. 请帮助

这是我的 HTML 代码

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

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

这是我的Javascript代码


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

function updateValue(id,name)
{
  if(document.getElementById(id).checked)
    {
         checked='yes'
    }
  else if(!document.getElementById(id).checked)
    {
      checked='no'
    }
  
  if(checked=='yes')
    {
      addButton(id,name);
    }
  else if(checked=='no')
    {
      removeButton(id,name);
    }
  
}

function addButton(id,name)
{
  var nameOfButton = name+'X';
var idofButton = id+'11';
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'
if(document.getElementById('DropArea').contains(document.getElementById(idofButton)))
{
document.getElementById('DropArea').remove(document.getElementById(idofButton));
console.log('Button Removed');
      
    }
}
function someMsg(id)
{
var name = id.substring(0,id.length-2);
document.getElementById(id).remove();
document.getElementById(name).checked=false;
console.log('Deleted');
}

Answer 1

Element.remove() 没有任何参数，所以当你通过你的方式调用时，它会删除 DropArea 元素（包括子元素，如 idofButton）。

解决方法：修改下面一行

document.getElementById('DropArea').remove(document.getElementById(idofButton));

到

document.getElementById(idofButton).remove();

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

function updateValue(id, name) {
  if (document.getElementById(id).checked) {
    checked = 'yes'
  } else if (!document.getElementById(id).checked) {
    checked = 'no'
  }

  if (checked == 'yes') {
    addButton(id, name);
  } else if (checked == 'no') {
    removeButton(id, name);
  }

}

function addButton(id, name) {
  var nameOfButton = name + 'X';
  var idofButton = id + '11';
  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'
  if (document.getElementById('DropArea').contains(document.getElementById(idofButton))) {
    document.getElementById(idofButton).remove();
    console.log('Button Removed');

  }
}

function someMsg(id) {
  var name = id.substring(0, id.length - 2);
  document.getElementById(id).remove();
  document.getElementById(name).checked = false;
  console.log('Deleted');
}

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

<div id="DropArea">

</div>

Answer 2

实现相同结果的另一种方法：

const dropArea = document.querySelector("#dropArea");
const checkbox = document.querySelector("#priceFilter");

checkbox.addEventListener("change", function(e) {
  if (this.checked) {
    const btn = createSpecificButton();

    dropArea.appendChild(btn);
  } else {
    const btn = dropArea.querySelector("button");

    dropArea.removeChild(btn);
  }
});

const createSpecificButton = () => {
  const btn = document.createElement("button");

  btn.innerText = "Click Here";

  btn.addEventListener("click", function(e) {
    checkbox.checked = false;

    this.remove();
  });

  return btn;
};

<div id="filterDropArea container">
  <input type="checkbox" name="priceFilter" id="priceFilter" /> Price Filter
</div>

<div id="dropArea"></div>

HTML 复选框 "onclick" 创建按钮问题

HTML Checkbox "onclick" Create Button issue

html

javascript

checkbox