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

This is my HTML

<div >
  <input id="firstInput"  type="checkbox" <label for="firstInput" >compare</label>
</div>


<div >

  <div >
    <div >
      <button >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?

CodePudding user response：

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" >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" >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" >compare</label><br />

<button type="button" id="removeButton">Remove item</button><br />

CodePudding user response：

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