<button class="btn js-add">Add Listener</button>
<button class="btn js-remove">Remove Listener</button>
<hr>
<button class="btn target-btn">Click me</button>
body {
  padding: 16px;
  text-align: center;
}
const addListenerBtn = document.querySelector('.js-add');
const removeListenerBtn = document.querySelector('.js-remove');
const btn = document.querySelector(".target-btn");

const handleClick = () => {
  console.log("click event listener callback");
};

addListenerBtn.addEventListener("click", () => {
  btn.addEventListener("click", handleClick);
  console.log("click event listener was added to btn");
});

removeListenerBtn.addEventListener("click", () => {
  btn.removeEventListener("click", handleClick);
  console.log("click event listener was removed from btn");
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.