Как получить доступ к элементу которого я создал в javascript?

Question

[Sergei2325]

https://jsfiddle.net/b3v6ky1z/
Всем привет! Подскажите пожалуйста при клику на кнопку я создаю элемент через js и даю ему класс

button2 = document.createElement('button')
        button2.setAttribute("class", "buttonDelete");  
        tr.appendChild(button2)
        button2.innerHTML = 'Delete');

Теперь надо при клику на данный класс удалять элемент но оно даже не видет этот класс(

buttonDelete.addEventListener('click',function(){
    console.log('ggwp');
})

Answer 1

[Alex]

1. Не setAttribute("class", "buttonDelete"); а classList.add("buttonDelete");
   
2. Вставлять элемент в документ (tr.appendChild(button2)) нужно в самую последнюю очередь, то есть после изменения содержимого button2.innerHTML = 'Delete');
   
3. У вас проблема в том, что в buttonDelete хранится список всех кнопок которые были на момент вызова querySelector. Это не динамическая величина. Вызвали querySelector, он вернул все кнопки которые были на странице в данный момент. Логично, что новые кнопки в этой выборке отсутствуют. Чтобы решить проблему вам нужно:
   
   1. Вынести всю логику для удаления в отдельную функцию, назовём её removeCallback.
      
   2. Добавлять слушателя событий отдельно для каждой кнопки в момент её создания:

      button2.addEventListener('click', removeCallback)
      tr.appendChild(button2)

      
      
   
   
   

Comments

[Sergei2325]

thanks a lot