how to stop an Event to run again in simple javascript?

Question

My Code is below . Now what i want is that ,the event execute only on first mouseover after that it should become disable. which means if user mousover again it should do nothing ** **Thanks

HTML is below !

<div id="welcomehomebtndiv">
    <button id="welcomehomebtnteacher" type="button">Teacher</button>
    <button id="welcomehomebtnstudent" type="button">Student</button>
    </div>

actual function is this !

document.getElementById("welcomehomebtnteacher").addEventListener("mouseover", removebtn);

    function removebtn() {
        var parent = document.getElementById("welcomehomebtnteacher");
        var child = document.getElementById("welcomehomebtnstudent");
        parent.removeChild(child);
}

Answer 1

In the event listerer just unbind the event;

function removebtn(e) {
    e.target.removeEventListener('mouseover', removebtn);
    ...
}

Answer 2

The most obvious solution is to add a flag and check if it's already raised or not:

var childRemoved = false;
document.getElementById("welcomehomebtnteacher").addEventListener("mouseover", removebtn);

function removebtn() {
    if (!childRemoved) {
      var parent = document.getElementById("welcomehomebtnteacher");
      var child = document.getElementById("welcomehomebtnstudent");
      parent.removeChild(child);
      childRemoved = true;
    }
}

Answer 3

The Teacher button will be disabled & will NOT REMOVE THE BUTTON .Hope this your criteria.If this is so you can use disabled=true;

document.getElementById("welcomehomebtnteacher").addEventListener("mouseover", removebtn);
function removebtn() {
     document.getElementById("welcomehomebtnteacher").disabled =true;
 }

DEMO