How can i access my parent li element using javascript?

Question

I am a beginner in JavaScript and I can\'t figure out that how can I get the index of li whose checkbox is checked and add/remove the CSS class cut to that particular li. I trie

Answer 1

You can pass this keyword to the function so that you can identify the closest li element of the clicked checkbox:

function myfunction(el){
  if(el.checked){
    el.closest('li').classList.add('cut');
  }
  else{
    el.closest('li').classList.remove('cut');
  }
}

.cut{
  text-decoration: line-through;
  opacity: 0.4;
}

#mylist{list-style: none;}

  


    

      
      make tea
    

    

      
      notes making
    

    

      
      set clothes
    

  

Attaching event using JavaScript:

var checkboxes = document.querySelectorAll('.mycheck .status');
checkboxes.forEach(function(chk){
  chk.addEventListener('click', function(){
    myfunction(this);
  });
})
function myfunction(el){
  if(el.checked){
    el.closest('li').classList.add('cut');
  }
  else{
    el.closest('li').classList.remove('cut');
  }
}

.cut{
  text-decoration: line-through;
  opacity: 0.4;
}

#mylist{list-style: none;}

  


    

      
      make tea
    

    

      
      notes making
    

    

      
      set clothes