dynamically add remove elements using JS

Question

There is a form on the page that is added to that element by clicking the add button And by pressing the delete button, the created element will be deleted The problem is that the elements that exist on the page before adding can be deleted But the elements that are added by clicking the add button cannot be deleted.


let form = document.getElementById('aboutForm');

document.getElementById('addMore').addEventListener('click', () => {

    //Make Div
    const div = document.createElement('div')
    div.classList = 'bg-gray-300 p-5 mt-6 relative'


    //Title Label
    const TitleLabel = document.createElement("label")
    TitleLabel.classList = 'block text-sm text-gray-600'
    TitleLabel.innerText = ` title`
    TitleLabel.setAttribute('for', 'Side_Title')


    //Title Inputbox
    const TitleInputbox = document.createElement("input")
    TitleInputbox.classList = 'w-full border-none px-5 py-1 text-gray-700 bg-gray-200 rounded'
    TitleInputbox.setAttribute('name', 'Side_Title[]')
    TitleInputbox.setAttribute('id', 'Side_Title')


    //Caption Label
    const CaptionLabel = document.createElement("label")
    CaptionLabel.classList = 'block text-sm text-gray-600 mt-6'
    CaptionLabel.innerText = ` caption`
    CaptionLabel.setAttribute('for', 'Side_Caption')

    //Caption Inputbox
    const CaptionInputbox = document.createElement("input")
    CaptionInputbox.classList = 'w-full border-none px-5 py-1 text-gray-700 bg-gray-200 rounded'
    CaptionInputbox.setAttribute('name', 'Side_Caption[]')
    CaptionInputbox.setAttribute('id', 'Side_Caption')


    //Remove Button
    const remove = document.createElement("button")
    remove.classList = 'absolute text-xl top-0 left-2 removeElement'
    remove.innerHTML = '<i class="fas fa-times text-red-600"></i>'
    remove.setAttribute('type', 'button')

    //Appernd Elements
    form.append(div)
    div.appendChild(TitleLabel)
    div.appendChild(TitleInputbox)
    div.appendChild(CaptionLabel)
    div.appendChild(CaptionInputbox)
    div.appendChild(remove)


})

document.querySelectorAll('.removeElement').forEach(e => {
    e.addEventListener('click', () => {
        e.parentNode.remove()
    })
})

Marco · Accepted Answer · 2022-09-16 18:30:38Z

1

The problem is, that the button you are adding, those not have any event listeners attached to it, that handle the click event.

All the elements that actually exist, when the js is running on load do get the click handler, but elements that you dynamically add, do not. So you have to tell your code what to do, when one of those elements does get clicked.

//Remove Button
const remove = document.createElement("button")
remove.classList = 'absolute text-xl top-0 left-2 removeElement'
remove.innerHTML = '<i class="fas fa-times text-red-600"></i>'
remove.setAttribute('type', 'button')
remove.addEventListener('click', (e) => {
    e.target.parentElement.remove()
})

answered Sep 16, 2022 at 18:30

Marco

24.1k13 gold badges81 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user15723984 Over a year ago

In this code, only the remove button will be removed

Kinglish · Accepted Answer · 2022-09-16 18:53:15Z

1

You can use an event delegate which will work even on dynamically created buttons. Put the listener on a static container object, like the form itself, then sniff for the button on click

form.addEventListener('click', e => {
   if (e.target.classList.contains('removeElement')) {
      e.target.closest('div.relative').remove()
   }
})

edited Sep 16, 2022 at 18:53

answered Sep 16, 2022 at 18:34

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Comments

user15723984 · Accepted Answer · 2022-09-16 18:48:06Z

0

    //Remove Button
    const remove = document.createElement("button")
    remove.classList = 'absolute text-xl top-0 left-2 removeElement'
    remove.innerHTML = '<i class="fas fa-times text-red-600"></i>'
    remove.setAttribute('type', 'button')
    remove.addEventListener('click', () => {
      div.remove()
    })

answered Sep 16, 2022 at 18:48

user15723984

Collectives™ on Stack Overflow

dynamically add remove elements using JS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related