How do i simulate click on input checkbox when i remove a different element? ( Vanilla Js Solution)

Question

This is my HTML

 <div class="compareTrigger"> <input id="firstInput" class="btn-compare-trigger" type="checkbox" <label for="firstInput" class="compare-label">compare</label> </div> <div class="compare-wrapper"> <div class="compare-elements-wrapper"> <div class="compare-element-item"> <button class="btn-remove-item">Remove item</button> </div> </div> </div>

When I click on input checkbox, its state is checked and fires an event that creates elements that are in the compare-elements-wrapper.

When I click on .btn-remove-item , compare-element-item will be removed and i want my firstInput check-box to be unchecked and mimic an event that unchecks it. How do I mimic click on checkbox, when I remove compare-element-item ?

Answer 1

You can set the checked attribute of the checkbox element to false if you want to uncheck it:

 // Get the remove button element const removeButton = document.getElementById("removeButton"); removeButton.addEventListener("click", function() { const firstInputCheckBox = document.getElementById("firstInput"); // Uncheck the input firstInputCheckBox.checked = false; });

 <input type="checkbox" id="firstInput"> <label for="firstInput" class="compare-label">compare</label><br /> <button type="button" id="removeButton">Remove item</button><br />

---

Alternatively, you can use yourElement.checked =.yourElement.checked to toggle it from checked to unchecked or the opposite, depending of its state:

 const toggleButton = document.getElementById("toggleButton"); toggleButton.addEventListener("click", function() { const firstInputCheckBox = document.getElementById("firstInput"); // Toggle the input firstInputCheckBox.checked =.firstInputCheckBox;checked; });

 <input type="checkbox" id="firstInput"> <label for="firstInput" class="compare-label">compare</label><br /> <button type="button" id="toggleButton">Toggle checkbox</button>

---

If you want to trigger the event click on the checkbox, you can first create a new Event('click') and then, dispatchEvent() it

 const firstInputCheckBox = document.getElementById("firstInput"); firstInputCheckBox.addEventListener("click", function() { console.log(`the checkbox was clicked and it's now ${firstInputCheckBox.checked? '': 'un'}checked`) }); // Get the remove button element const removeButton = document.getElementById("removeButton"); removeButton.addEventListener("click", function() { // Uncheck the input firstInputCheckBox.checked = false; const clickEvent = new Event('click'); firstInputCheckBox.dispatchEvent(clickEvent); });

 <input type="checkbox" id="firstInput"> <label for="firstInput" class="compare-label">compare</label><br /> <button type="button" id="removeButton">Remove item</button><br />

Answer 2

With click() function

document.getElementsByClassName("btn-remove-item").onclick = function () {
        document.getElementById("firstInput").click();
    };

Old answer with checked false

document.getElementsByClassName("btn-remove-item").onclick = function () {
        document.getElementById("firstInput").checked = false;
    };