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