JavaScript RemoveEventListener not working

[richarddunnebsc]

I have a html table as such: cell1 input button with AddRow click event, cell2 input text, cells 3 & 4 input number.


Onclick gives me this



I want to replace the AddRow with a DeleteRow on the button on the preceding row. The removeEventListener isn't working.

var x=document.getElementById("TableName");
var node=x.rows[0].cloneNode(true);   
x.appendChild(node);   
var row = document.getElementsByName('Buttons').length-2;
document.getElementsByName("Buttons")[row].setAttribute("value","-");
document.getElementsByName("Buttons")[row].removeEventListener("click",AddRow);

<input type="button" Name="Buttons" value="+" style="height: 30px; width: 100%;" onclick="AddRow();">

What am I doing wrong? Any help appreciated.

 

[Johna]

Do you even have a click event listener?

 

[Deleted member 2829]

See the documentation on removeEventListener :

The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.

As I verified, it really does not work on a listener that was defined in the HTML. There's no error (except when you misspeel the function name), it just does not do anything. So add your listeners dynamically and you'll be fine.

 

[richarddunnebsc]

I have changed the design, no need to remove event listener. What is the best way of adding an event listener to an input dynamically? Am I using addEventListener wrong?

 

[Deleted member 2829]

I have changed the design, no need to remove event listener. What is the best way of adding an event listener to an input dynamically? Am I using addEventListener wrong?

How would we know, without seeing your code for it ?

 

[richarddunnebsc]

I have 3 tables, first with header and first row of input which is required, second should the user want to add one or more additional rows, third for the AddRow button. If the user click the AddRow button, if the 2nd table is empty, a row is added dynamically, otherwise, the first row is cloned and appended.
I have added the first row, but its not adding an event handler. Here is the code for the last cell

var cell3 = document.createElement("td");
cell3.style.width = "5%";
var ele3 = document.createElement("input");
ele3.type = "button";
ele3.value = "-";
ele3.style.width = "100%";
ele3.addEventListener('click', function() {DeleteRow});
cell3.appendChild(ele3);
row.appendChild(cell3);
table.appendChild(row);

 

[Deleted member 2829]

ele3.addEventListener('click', function() {DeleteRow});

That should just be

ele3.addEventListener('click', DeleteRow);

Strange that your rather weird syntax does not produce an error or warning though 🤔

 

[richarddunnebsc]

I tried that

ele3.addEventListener('click', DeleteRow);

Not only is it not adding function to the button, it not adding the button either. However if I use

ele3.addEventListener('click',function(){DeleteSkills()});

it is adding the button to the td, just not the event listener.

 

[Deleted member 2829]

I tried that

ele3.addEventListener('click', DeleteRow);

Not only is it not adding function to the button, it not adding the button either.

Why on earth had you expected this to add a button to anything ? I am truly mystified.
And how do you conclude that the event listener was not added ? Have you inspected the element in the debugger, or printed it in the Console ?

However if I use

ele3.addEventListener('click',function(){DeleteSkills()});

it is adding the button to the td, just not the event listener.

Apparently this statement is calling the function DeleteSkills(), which apparently has the side effect of adding a button to something (yikes), but the return value of this function is not a function that can be registered as an event listener. Ugh... why do you do stuff like this ? If you want to call a function, just call it. Don't bury the function call inside a statement to add an event listener. This is really bad programming which nob ody will be able to understand (perhaps not even you after a couple of years).