How to remove on and off the addEventListner in Javascript

Question

Hello guys im new learning about javascript, this is my css .done {text-decoration: line-through;} and this is the script:

<h1>Testing</h1>
<script>
    var h1 = document.querySelector('h1');
    h1.addEventListener("click", lineThrough);
    function lineThrough(){
        event.target.className='done';
    }
    // h1.addEventListener("click", reset);
    // function reset(){
    //  h1.className="";
    // }
</script>

I just want if i click, it toggle .done on and off. I need the solution please. Thanks

Answer 1

Use classList.toggle method

var h1 = document.querySelector('h1');
h1.addEventListener("click", lineThrough);

function lineThrough() {
  event.target.classList.toggle('done');
}

.done {
  color: green;
  text-decoration: line-through;
}

<h1>Testing</h1>