How to solve failed to removeEventListener?

Question

I want to stop the eventListener after the function is done, here is the illustration:

I made an icon and when clicked it gonna show the input form and then when my cursor clicked or mouseover it shows the button search again below that input, but when I click again and over, the button search keep adding the element buttons on below,

Here is the code :

 let FunFun = document.querySelector( "img#pic" ).addEventListener( "click", () => {
     let newEl = document.createElement("input");
      newEl.id   = "inPut"
      newEl.type = "text";
      newEl.name = "foo";
      newEl.value = "";
      newEl.placeholder  = "type your city";
     let oldEl = document.querySelector("#pic")

     //parentEL
     let parentEl = document.querySelector( ".addCity" )
      parentEl.replaceChild( newEl, oldEl )

     let btN = document.querySelector( "#inPut" ).addEventListener( "click", () => {
       btN = document.createElement( "button" )
       btN.class = "btn0"
       btN.textContent = "search"
       let _input  = document.querySelector("#inPut")
       _input.after(btN)
// tried wrote  code removeEventListener also, but nothing error and cant make the event stop

      }) end the btN

      // console.log(btN)

   // let buttnRm = document.querySelector("#inPut").removeEventListener("click", () => {  console.log("test" )});

    }) // end  the FunFun

My code above was no error on the console, and I tried to put the removeEven listener below the function btN , it got error, like the code above,

I tried to make code like this on function above :

.addEventListener("click", myFunction, true) // false

.removeEventListener("click", myFunction, true) // false

i switch true and false above, but still nothing

some pics of the buttons showing more and more when I click the input form element, after my function addeventlistener working

just upload the pic, that is the pic before i click, and when i click the input form, it show one button, and when i click again, it show agai over and over — Zr Classic, Oct 08 '18 at 06:56
Read the documentation of [`removeEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). You have to remove the actual listener, not another listener with the same `type`. — str, Oct 08 '18 at 07:11

vrintle · Accepted Answer · 2018-12-09T04:44:38.507

Anonymous Event Listeners cannot be removed

First you'll have to declare a function eventHandler to be your event listener, and then remove it later with removeEventListener

let eventHandler = () => {
   btN = document.createElement( "button" )
   btN.class = "btn0"
   btN.textContent = "search"
   let cityInput = document.querySelector( "#inPut" )
   cityInput.after(btN)

   // Remove the eventListener just after the first call
   cityInput.removeEventListener('click' , eventHandler, true)
}

Select the input element and store it as variable.

let cityInput = document.querySelector( "#inPut" ); // select the input element
cityInput.addEventListener( "click", eventHandler, true) // add a non-anonymous function as event listener

let FunFun = document.querySelector( "img#pic" ).addEventListener( "click", () => {
 let newEl = document.createElement("input");
  newEl.id   = "inPut"
  newEl.type = "text";
  newEl.name = "foo";
  newEl.value = "";
  newEl.placeholder  = "type your city";
 let oldEl = document.querySelector("#pic")

 //parentEL
 let parentEl = document.querySelector( ".addCity" )
  parentEl.replaceChild( newEl, oldEl )

let eventHandler = () => {
   btN = document.createElement( "button" )
   btN.class = "btn0"
   btN.textContent = "search"
   cityInput.after(btN)

   cityInput.removeEventListener('click' , eventHandler, true)
}

let cityInput = document.querySelector( "#inPut" );
cityInput.addEventListener( "click", eventHandler, true) // end the btN
 
  // console.log(btN)

// let buttnRm = document.querySelector("#inPut").removeEventListener("click", () => {  console.log("test" )});

}) // end  the FunFun

#pic {
  height: 100px;
  width: 100px;
  border: 1px solid;
}

<div class='addCity'>
  <img src='something.jpg' id='pic'>
</div>

document.querySelector( "#inPut" ). i want to make this input when click, did u miss this on above codes, sorry — Zr Classic, Oct 08 '18 at 07:28
@ZrClassic when someone clicks on the image, `#input` is formed always, that is what the first few lines of function `FunFun` are doing. Can you explain me more what are you saying? — vrintle, Oct 08 '18 at 07:35
PERFECT buddy !!, it worked like i wanted ,, thank you very much — Zr Classic, Oct 08 '18 at 07:37

How to solve failed to removeEventListener?

1 Answers1