Hide grand-parent class when checkbox is checked

Question

I need to hide the first class below (wfob_wrap) when checkbox (wfob_checkbox) is checked. I tried many ways with no success.

Could anyone help me with this?

Thank you!

user_1552587 · Answer

You can use something like this:

document.querySelector('[type=checkbox]').addEventListener('change', e => {
  e.target.closest('#wfob_wrap').firstElementChild.style.display = 'none';
});

I've used .closest(..) to get the #wfob_wrap element and .firstElementChild to get this element's first child.

In this specific case, since the element you're looking for has an id, you don't need .closest(..), you can get that element directly using document.getElementById('wfob_wrap').

user_13573444 · Answer

I gave two solutions for javascript and jquery. Was it necessary?

jquery version:

$('.wfob_checkbox.wfob_bump_product').click(function(){
  if($(this).is(':checked')) {
     $(this).closest('#wfob_wrap .wfob_wrapper').css('display', 'none');
  }
});

javascript version:

let checkbox = document.querySelector('.wfob_checkbox.wfob_bump_product');

checkbox.onclick = function() {
  if (this.checked) {
    this.closest('.wfob_wrapper').style.display = 'none';
  }
}

user_295783 · Answer

Try this

It can handle that the checkbox is checked on load

The first is for one checkbox, then second for many.

const toggle = function() {
  const chk = document.querySelector(".wfob_checkbox");
  chk.closest(".wfob_wrapper").classList.toggle("hide", chk.checked)
};  
window.addEventListener("load",function() {
  document.querySelector(".wfob_checkbox").addEventListener("click",toggle)
  toggle()
});

.hide { display:none; }

If you have more sets, you cannot use IDs

window.addEventListener("load", function() {
  document.getElementById("container").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("wfob_checkbox")) {
      tgt.closest(".wfob_wrap_start").querySelector(".wfob_wrapper").classList.toggle("hide", tgt.checked)
    }
  });
  
  // loading
  [...document.querySelectorAll(".wfob_checkbox:checked")].forEach(tgt => 
      tgt.closest(".wfob_wrap_start").querySelector(".wfob_wrapper").classList.toggle("hide", tgt.checked)
  )    
  
});

.hide {
  display: none;
}

Hide grand-parent class when checkbox is checked

3 Answers