Así que tengo los siguientes objetivos del evento de clic en la casilla de verificación
1] Crear un botón con id = 'id-of-checkbox'+'some-character-here' en div especificado
2] Al hacer clic en ese botón en particular, se eliminará el botón y la casilla de verificación relacionada con él
3] Si el usuario desea eliminar el botón en el div especificado al desmarcar la casilla de verificación, debe hacerlo
4] Y si el usuario vuelve a marcar, el botón de la casilla de verificación debe crearse en el div especificado
Ahora he logrado los primeros 3 objetivos y tengo un problema con el cuarto, es decir
si vuelvo a hacer clic en la casilla de verificación después de desmarcarla, el botón no se crea y la consola no
devolver cualquier error asociado con él ... por favor ayuda
Aquí está mi código 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>Aquí está mi código 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'); }Element.remove() no tiene ningún parámetro, por lo que cuando llame, eliminará el elemento DropArea (incluye elementos secundarios, como idofButton ).
Solución: cambie la línea de abajo
document.getElementById('DropArea').remove(document.getElementById(idofButton));
A
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>Otro enfoque para lograr el mismo resultado:
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>