Javascript事件：getElementByID找不到插入的元素

Question

Mystery: I can't seem to pass an id to an inserted element and then remove that element using the id. I get the error:

"Uncaught TypeError: Cannot read property 'remove' of null"

So the getElementById(thisCorrection) is not finding the element defined by addButton.id=thisCorrection . Weird!

What I am trying to do: click on a button, which will insert a 2nd button (b2), make an id for b2 by incrementing a counter, mouseover b2 button will remove the button. Do it all in Javascript, not jQuery.

(I thought this was simple!)

 correctionID=0 function removeButton(thisCorrection){ document.getElementById(thisCorrection).remove() } function checkInput() { correctionID += 1; thisCorrection="correction" + correctionID.toString(); var addButton=document.createElement("button"); addButton.id=thisCorrection; addButton.innerHTML="here is the new button"; addButton.addEventListener ("mouseenter", removeButton(thisCorrection), false); this.parentElement.appendChild(addButton) ;} 

 <div> <button onclick="checkInput()"><span style='background:yellow'>click to add button </span></button> </div> 

Answer 1

Here is a simpler form that shows incredible javascript/dom weirdness (for a novice). Looks like I am going to have to use Jquery...

 correctionID=0 function removeButton(addButton){ //addButton.remove(); // Wow! Uncomment the line above and no new button appears. // that's because clicking on button 1 runs // removeButton even though the event is // attached to the new button not to button 1! console.log(addButton.id); } function checkInput(btn1) { correctionID += 1; thisCorrection="correction" + correctionID.toString(); var addButton=document.createElement("button"); btn1.parentElement.appendChild(addButton) ; addButton.id=thisCorrection; addButton.innerHTML="Here is the new button"; addButton.addEventListener ("dblclick",removeButton(addButton), false); }; 

 <div> <button onclick="checkInput(this)"><span style='background:yellow'>click to add button </span></button> </div> 

Answer 2

Here is the answer... (after much blood, sweat, tears and Googling!)

Why wasn't it working before? The argument to the function is an event, not a button!

 correctionID=0 function removeButton(evt) { addButton=evt.target; //cannot says evt.remove() ! console.log(evt.target.id); addButton.remove(); } function checkInput(btn1) { correctionID += 1; thisCorrection="correction" + correctionID.toString(); var addButton=document.createElement("button"); btn1.parentElement.appendChild(addButton) ; addButton.id=thisCorrection; addButton.innerHTML="Here is the new button"; addButton.addEventListener("click",removeButton, false); }; 

 <div> <button onclick="checkInput(this)"><span style='background:yellow'>click to add button </span></button> </div>