What is DOM removeEventListener() ?

Example 1. Multiple Function Call with single event

Html Code

<article class="class_container" id="idcontainer" style="margin-top:35px">
<div class="content_class">
<h1>Set Dom Value</h1>

<div class="teach coders tutorial"> 
    <h2>First heading</h2>
    <p>First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. </p>
    <a class="my-btn">More First</a>
</div>


<div class="teach coders tutorial">
<h2>Second heading</h2>
<p>Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text.  Second Paragraph Text. </p>
<a href="readsecond.html" class="my-btn">More Seond</a>
</div>

<div class="teach coders tutorial">
<h2>Third heading</h2>
<p>Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. </p>
<a href="readthird.html" class="my-btn">More Third</a>
</div>

<div class="teach coders tutorial">
<h2>Forth  heading</h2>
<p>Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. </p>
<a href="readforth.html" class="my-btn">More Forth</a>
</div>

<div class="teach coders tutorial">
<h2>Fifth  heading</h2>
<p>Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. </p>

</div>
</div>
</article>

Javascript Code

<script>
//add function 1
document.querySelector(".teach").addEventListener("click", myfunc1);
//ADD FUNCTION 2
document.querySelector(".teach").addEventListener("click", myfunc2);
//add function 3
document.querySelector(".teach").addEventListener("click", myfunc3);

function myfunc1(){
  this.style.background="lightblue";
}
function myfunc2(){
  this.style.border="solid 2px #777";
}

function myfunc3(){
  this.style.padding="20px";
}

//REMOVE FUNCTION 2
document.querySelector(".teach").removeEventListener("click", myfunc2)

</script>