EventListeners get deleted on newly added Elements

Question

here is my JavaScript you can see the addForm function which adds a new table row to the dom the new added form element to the dom eventlisteners don't work on it

 animationsDiv=document.getElementById('animationsDiv');
 bodytablerow=document.getElementById('bodytablerow');
 DeleteButtom=document.getElementById('DeleteButtom');
 SubmitButton=document.getElementById('SubmitButton');
 addButton=document.getElementById('addButton');
removeForm=eventt=>{
    eventt.target.parentElement.parentElement.remove()
  }
AddForm=eventt=>{
    bodyy=eventt.target.parentElement.firstElementChild.firstElementChild;
        g=`new added code (HTML)`
            bodyy.insertAdjacentHTML("beforeend", g);
};

eventapplyBorder=eventt=>{
    const INPUTCONTAINER=eventt.target.parentElement;
    INPUTCONTAINER.classList.toggle('outline');
    eventt.target.value
};
inputs.forEach(input=>{
    input.addEventListener('focus',eventt=>eventapplyBorder(eventt));
    input.addEventListener('blur',eventt=>eventapplyBorder(eventt));
});
SubmitButton.addEventListener('click',eventt=>SubmitUser(eventt));
DeleteButtom.addEventListener('click',eventt=>removeForm(eventt));
addButton.addEventListener('click',eventt=>AddForm(eventt));

There are no listeners in your code, and nothing is being cloned (unless you could that line at the bottom which won't work (`insertAdjacentHTML` doesn't return anything). Can you update the code in your question with something that reflects the problem you're having (as a [mcve]). — Andy, Aug 02 '22 at 13:24

score 0 · Answer 1 · answered Aug 03 '22 at 01:35

In your variable, it won't work because you not give them to a variable. There is the explain

const animationsDiv=document.getElementById('animationsDiv');
const bodytablerow=document.getElementById('bodytablerow');
const DeleteButtom=document.getElementById('DeleteButtom');
const SubmitButton=document.getElementById('SubmitButton');
const addButton=document.getElementById('addButton');

You should learn about the basic off JavaScript, like variable, dom element, etc.

if you have to adds a new table row to the dom, you should use Insert Row method

Or you can see the same case on How to insert a row in an HTML table body in JavaScript

EventListeners get deleted on newly added Elements

1 Answers1