So i have following objectives from the checkbox click event
1] Create A Button having id = 'id-of-checkbox' 'some-character-here' in specified div
2] Clicking On That Particular Button Will Remove The Button As Well As Checkbox tick related to it
3] If User wants to remove button in specified div through unchecking the checkbox it should be done
4] And If User again checks the checkbox button should be created in specified div

Now i have achieved first 3 objectives and im having issue with 4th one , i.e
if i click on checkbox again after unticking it button is not getting created and console doesnt
return any error associated with it.. please help

Here Is My HTML Code

<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>

Here is My Javascript Code

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');
}

CodePudding user response：

Element.remove() don't have any parameters, so when you call by your way, it will remove DropArea element (includes children, like idofButton).

Solution: Change the below line

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

To

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>

CodePudding user response：

Another approach to achieving the same result:

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>